Storybook: تحميل البيانات الخارجية قبل إضافة القصة

تم إنشاؤها على ١٦ فبراير ٢٠١٧  ·  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} />;
      })
});

أي نصائح حول كيفية تحقيق شيء مثل هذا مع القصص القصيرة؟

picture 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>
  ))
picture einarlove في ١٦ فبراير ٢٠١٧
👍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 picture einarlove في ١٦ فبراير ٢٠١٧
👍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 picture ndelangen في ٢٩ مارس ٢٠١٧

أود أن أسمع ملاحظاتك! إذا كنت تعتقد أن الحل الذي نشرته للتو سيكون مناسبًا لحالة استخدامك ، فلنتحدث عنه في هذه المشكلة: # 713.

إذا كنت لا توافق وتريد واجهة برمجة تطبيقات أخرى ، فنحن نرحب بك لإعادة فتح هذه المشكلة!

ndelangen picture ndelangen في ٢٩ مارس ٢٠١٧
هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات

القضايا ذات الصلة

ericterpstra picture ericterpstra  ·  3تعليقات
miljan-aleksic picture miljan-aleksic  ·  3تعليقات
sakulstra picture sakulstra  ·  3تعليقات
tlrobinson picture tlrobinson  ·  3تعليقات
wahengchang picture wahengchang  ·  3تعليقات