Storybook: कहानी जोड़ने से पहले बाहरी डेटा लोड हो रहा है

को निर्मित 16 फ़र॰ 2017 · 3टिप्पणियाँ · स्रोत: storybookjs/storybook

क्या कहानी प्रस्तुत करने/जोड़ने से पहले बाहरी एपीआई के माध्यम से डेटा लाने जैसे कुछ एसिंक काम करना संभव है?

इस तरह अंदर:

// 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

आप इसके बारे में क्या महसूस करते हैं?

मुझे लगता है कि एपीआई इस तरह दिखेगा (यह लागू नहीं किया गया है):

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

ndelangen 29 मार्च 2017

मैं आपकी प्रतिक्रिया सुनना चाहूंगा! अगर आपको लगता है कि मैंने जो समाधान अभी पोस्ट किया है वह आपके यूज़केस के लिए ठीक होगा, तो आइए इस मुद्दे पर इसके बारे में बात करते हैं: #713।

यदि आप असहमत हैं और एक और एपीआई चाहते हैं, तो इस मुद्दे को फिर से खोलने के लिए आपका स्वागत है!

ndelangen 29 मार्च 2017

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स