Используйте результаты выборки, чтобы сделать другой запрос выборки (JS / React)

Question

Как лучше всего использовать результаты одного запроса на выборку, чтобы сделать другой запрос на выборку к другой конечной точке?Как я могу подтвердить, что первая выборка завершена и произошел setState?

class ProductAvailability extends React.Component {
  state = {
    store_ids: []
  }
  componentDidMount() {
    fetch(`myapi.com/availability?productid=12345`)
    .then((results) => {
      return results.json();
    })
    .then((data) => {      
      const store_ids = data.result.map((store) => {
        return store.store_id
      })
      this.setState({store_ids: store_ids})
    })

    /* At this point I would like to make another request
       to myapi.com/storedata endpoint to obtain information 
       on each store in the state.store_ids, and add details 
       to the state */
  }


  render() {
    return (
      <div>
        <p>STORE INFO FROM STATE GOES HERE</p>
      </div>
    )
  }
}

Answer 1

Проще сделать с async/await (.then/.catch требует немного больше работы - также, ссылка на функцию Promise.each в Bluebird).Для ясности лучше переместить это из componentDidMount в свой собственный метод класса.

В качестве примечания: если это действие происходит для каждого продукта, то этот вторичный запрос должен обрабатываться на бэкэнде.,Таким образом, вам нужно всего лишь один AJAX запрос и получить все, что вам нужно, в ответе one .

componentDidMount = () => this.fetchData();


fetchData = async () => {
  try {
    const productRes = fetch(`myapi.com/availability?productid=12345`) // get product data
    const productData = await productRes.json(); // convert productRes to JSON

    const storeIDs = productData.map(({store_id}) => (store_id)); // map over productData JSON for "store_ids" and store them into storeIDs

    const storeData = [];
    await Promise.each(storeIDs, async id => { // loop over "store_ids" inside storeIDs
      try {
        const storeRes = await fetch(`myapi.com/store?id=${id}`); // fetch data by "id"
        const storeJSON = await storeRes.json(); // convert storeRes to JSON
        storeData.push(storeJSON); // push storeJSON into the storeData array, then loop back to the top until all ids have been fetched
      } catch(err) { console.error(err) }
    });

    this.setState({ productData, storeData }) // set both results to state
  } catch (err) {
    console.error(err);
  }
}

Answer 2

Когда вы выполняете setState, он обновляет компонент, поэтому естественная точка для чтения состояния после того, как вы сделали setsets, если вы прочитали документы, находится в componentDidUpdate (prevProps, prevState).Я оставляю вас в документе: https://reactjs.org/docs/react-component.html#componentdidupdate Внимание: не используйте дату обновления воли, это небезопасно, как вы читаете в документации.

Дальнейшее рассмотрение может быть сделано.Если вы можете избежать перевода этих данных в состояние, вы также можете сделать все в componendDidMount (возможно, с promall для всех других запросов), а затем установить состояние со старыми и новыми данными, это предпочтительно, так как вы обновляете свой компоненттолько один раз.