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条评论

相关问题