我将数据作为道具发送给组件。 但是，只有最后一个组件显示数据

Question

我想构建一个食品 web 应用程序。 我想从 api 获取数据并发送到不同的组件。 单击组件时，它们将根据发送给它们的道具显示数据。

但是，这里的问题只是最后一个组件显示数据。 其他人不是。

Image1(Home.js) Image2(Home.js-剩余) Image3(早餐成分) 图4（午餐部分） 图5（晚餐部分） 图片 6（输出 1） 图片 7（输出 2） 图片 8（输出 3）

Answer 1

好吧，有几件事：

1. 发布您的实际代码，而不是代码图片
2. .map function 如果要构建一个新数组，它并不是真的要遍历数组，请使用.forEach类的东西
3. 每个.map迭代调用setBreakfast （或其他之一）并覆盖先前的 state 值。 您想要构建一个数组并将 state 设置为该数组
4. 作为一般规则，不要在循环中更新 React state，它效率低下并且可能导致问题。 运行一个循环来构建一个值/数据结构，然后将 state 设置为

你想做什么是这样的：

.then(
    setBreakfast(data.map(food => food.breakfast));
    setLunch(data.map(food => food.lunch));
    setDinner(data.map(food => food.dinner));
);

这样您就可以将 state 值设置为.map的返回值，这是一个包含该膳食类型的所有相应膳食值的数组。