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 ：

あなたはそれについてどう思いますか？

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件

関連する問題