Storybook: Laden externer Daten vor dem Hinzufügen einer Story

Erstellt am 16. Feb. 2017 · 3Kommentare · Quelle: storybookjs/storybook

Ist es möglich, vor dem Rendern/Hinzufügen einer Story einige asynchrone Arbeiten wie das Abrufen von Daten über eine externe API durchzuführen?

Innen so ähnlich:

// inside src/stories/index.js

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

Dies funktioniert nicht. Ich habe auch versucht, so etwas zu tun:

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

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

Irgendwelche Tipps, wie man so etwas mit Märchenbuch erreichen kann?

Quelle

dnlsandiego

👍6

Hilfreichster Kommentar

Könnte etwas vorschlagen wie

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 am 16. Feb. 2017

👍18 👎4

Alle 3 Kommentare

Könnte etwas vorschlagen wie

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 am 16. Feb. 2017

👍18 👎4

Danke für den Tipp @einarlove!

Dieses Problem weist auf das gleiche Problem hin und hat eine mögliche Lösung: https://github.com/storybooks/react-storybook/issues/713

Was fühlst du dabei?

Ich stelle mir die API so vor (dies ist nicht implementiert):

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

ndelangen am 29. März 2017

Ich würde gerne Ihr Feedback hören! Wenn Sie denken, dass die Lösung, die ich gerade gepostet habe, für Ihren Anwendungsfall geeignet wäre, lassen Sie uns in dieser Ausgabe darüber sprechen: #713.

Wenn Sie anderer Meinung sind und eine andere API wünschen, können Sie dieses Problem gerne erneut öffnen!

ndelangen am 29. März 2017

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Storybook: Laden externer Daten vor dem Hinzufügen einer Story

Hilfreichster Kommentar

Alle 3 Kommentare

Verwandte Themen