Storybook: Загрузка внешних данных перед добавлением истории

Созданный на 16 февр. 2017 · 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 16 февр. 2017

👍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 16 февр. 2017

👍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 29 мар. 2017

Хотелось бы услышать ваши отзывы! Если вы думаете, что решение, которое я только что опубликовал, подойдет для вашего варианта использования, давайте поговорим об этом в этом выпуске: # 713.

Если вы не согласны и хотите использовать другой API, снова откройте эту проблему!

ndelangen 29 мар. 2017

Была ли эта страница полезной?

0 / 5 - 0 рейтинги