如何在循环中调用api并在useEffect React Native中对其执行操作

Question

下面是我的场景:

我有一个购物车对象在Redux存储具有具有sellerId和产品数组的对象数组的形式的信息，我想在每个对象上映射以获得sellerId，然后在页面加载时从API获取卖方数据。

这是我的代码

const [uniqueSellers, setUniqueSellers] = useState([]);
useEffect(() => {
const uniqueSellerIds = [];
cart.filter((item) => {
if (!uniqueSellerIds.includes(item.sellerId)) {
uniqueSellerIds.push(item.sellerId);
}
});
if (uniqueSellerIds.length === 1) setItems(["Seller's delivery"]);
uniqueSellerIds.map((sellerId) =>
axios.get(`${devBaseURL}/sellers/${sellerId}`).then((res) => {
setUniqueSellers((prev) => [
...prev,
{
sellerId: res.data.data[0]._id,
sellerProvince: res.data.data[0].businessAddress.province,
},
]);
}),
);
// Here I want to perform some operations on uniqueSellers state, but it's not available here
console.log('uniqueSellers: ', uniqueSellers); // logs empty array
setLoading(false);
return () => {
setUniqueSellers([]);
};
}, []);

Answer 1

改变状态是一个异步过程。读取操作也是异步的。所以，你的控制台日志总是在你的axios调用和setUniqueSellers钩子之前执行。

监听另一个useEffect中uniqueSellers数组的变化，将其作为依赖项。

useEffect(() => {
console.log(uniqueSellers); //will log after every change in uniqueSellers

}, [uniqueSellers])