[英]Use fetch results to make another fetch request (JS/React)
使用一个获取请求的结果向另一个端点发出另一个获取请求的最佳方法是什么? 如何确认第一次获取已完成且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>
)
}
}
当您执行setState时,它将更新组件,因此,如果您已经阅读了文档,则在完成setstate之后自然要读取状态的点位于componentDidUpdate(prevProps,prevState)中。 我将您留给文档: https ://reactjs.org/docs/react-component.html#componentdidupdate注意:不要使用willupdate,因为在文档中阅读它是不安全的。
可以做进一步的考虑。 如果可以避免将这些数据置于状态,则还可以在componendDidMount中进行所有操作(可能对所有其他请求使用promiseall),然后使用新旧数据设置状态,这是可取的,因为更新了组件只有一次。
使用async/await
更加容易( .then/.catch
需要做更多的工作-同样,请参考Bluebird的Promise.each函数)。 为了清楚起见,最好将其从componentDidMount
移到其自己的类方法中。
附带说明一下,如果每个产品都在执行此操作,则该二级查询应在后端处理。 这样,您只需要发出一个 AJAX
请求并在一个响应中检索所需的所有内容。
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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.