Storybook: Memuat data eksternal sebelum menambahkan cerita

Dibuat pada 16 Feb 2017 · 3Komentar · Sumber: storybookjs/storybook

Apakah mungkin melakukan pekerjaan asinkron seperti mengambil data melalui API eksternal sebelum merender/menambahkan cerita?

Kira-kira seperti ini di dalam:

// inside src/stories/index.js

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

Ini tidak bekerja. Saya juga mencoba melakukan sesuatu seperti ini:

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

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

Adakah tips tentang cara mencapai sesuatu seperti ini dengan buku cerita?

Sumber

dnlsandiego

👍6

Komentar yang paling membantu

Dapat menyarankan sesuatu seperti

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 pada 16 Feb 2017

👍18 👎4

Semua 3 komentar

Dapat menyarankan sesuatu seperti

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 pada 16 Feb 2017

👍18 👎4

Terima kasih atas tipnya @einarlove!

Masalah ini mengisyaratkan masalah yang sama dan memiliki kemungkinan solusi: https://github.com/storybooks/react-storybook/issues/713

Apa yang Anda rasakan tentangnya?

Saya membayangkan API akan terlihat seperti ini (ini tidak diterapkan):

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

ndelangen pada 29 Mar 2017

Saya ingin mendengar tanggapan Anda! Jika menurut Anda solusi yang baru saja saya posting akan baik-baik saja untuk usecase Anda, mari kita bicarakan dalam masalah ini: #713.

Jika Anda tidak setuju dan menginginkan API lain, Anda dapat membuka kembali masalah ini!

ndelangen pada 29 Mar 2017

Apakah halaman ini membantu?

0 / 5 - 0 peringkat