Storybook: 스토리를 추가하기 전에 외부 데이터 로드

에 만든 2017년 02월 16일 · 3코멘트 · 출처: storybookjs/storybook

스토리를 렌더링/추가하기 전에 외부 API를 통해 데이터를 가져오는 것과 같은 비동기 작업을 수행할 수 있습니까?

내부는 다음과 같습니다.

// inside src/stories/index.js

axios.get('http://api.someURLtogetdata.com')
  .then(({ data }) => {
    storiesOf('Data Viewer', module)
      .add('Test', () => {
        return <TestStory data={data} />;
      })
});

작동하지 않습니다. 나는 또한 다음과 같이 시도했다.

const stories = storiesOf('Data Viewer', module)

axios.get('http://api.someURLtogetdata.com')
  .then(({ data }) => {
      stories.add('Test', () => {
        return <TestStory data={data} />;
      })
});

스토리북으로 이와 같은 것을 달성하는 방법에 대한 팁이 있습니까?

출처

dnlsandiego

👍6

가장 유용한 댓글

다음과 같은 것을 제안할 수 있습니다.

class LoadData = extends React.Component {
  state = {
    data: null
  }

  componentDidMount() {
    axios.get(this.props.url).then(data => this.setState({ data }))
  }

  render() {
    return this.props.children(this.state.data)
  }
}

storiesOf('DataViewer')
  .add('test', () => (
    <LoadData url="http://api.someURLtogetdata.com">
      {data => 
        <TestStory data={data} />
      }
    </LoadData>
  ))

einarlove 에 2017년 02월 16일

👍18 👎4

모든 3 댓글

다음과 같은 것을 제안할 수 있습니다.

class LoadData = extends React.Component {
  state = {
    data: null
  }

  componentDidMount() {
    axios.get(this.props.url).then(data => this.setState({ data }))
  }

  render() {
    return this.props.children(this.state.data)
  }
}

storiesOf('DataViewer')
  .add('test', () => (
    <LoadData url="http://api.someURLtogetdata.com">
      {data => 
        <TestStory data={data} />
      }
    </LoadData>
  ))

einarlove 에 2017년 02월 16일

👍18 👎4

팁을 주셔서 감사합니다 @einarlove!

이 문제는 동일한 문제를 암시하며 가능한 해결책이 있습니다: https://github.com/storybooks/react-storybook/issues/713

그것에 대해 어떻게 생각하십니까?

API가 다음과 같이 보일 것이라고 상상합니다(구현되지 않음).

storiesOf('DataViewer')
  .add('test', () => axios
    .get('http://api.someURLtogetdata.com')
    .then(({ data }) => <TestStory data={data} />)
  )

ndelangen 에 2017년 03월 29일

귀하의 의견을 듣고 싶습니다! 방금 게시한 솔루션이 귀하의 사용 사례에 적합하다고 생각한다면 이번 호 #713에서 이에 대해 이야기해 보겠습니다.

동의하지 않고 다른 API를 원하는 경우 이 문제를 다시 여는 것을 환영합니다!

ndelangen 에 2017년 03월 29일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Storybook: 스토리를 추가하기 전에 외부 데이터 로드

가장 유용한 댓글

모든 3 댓글

관련 문제