使用 React 将数据从 API 动态添加到表

根据您的代码，我试图确定您的目标。因此，使用您拥有的内容，我更新了您的表格列表文件和营养文件。

我使您的表格动态化的方式不是将食物项目传递到您的 TableList 组件，而是需要一个食物对象列表，然后通过映射为每个对象创建一行。foodList 是您的列表的修改版本，这是添加包含您的食物信息的对象的地方

食物对象的结构为：

  const foodObject = {
                calories: responseData.nf_calories,
                protein: responseData.nf_protein,
                food: responseData.item_name
              };

并将其添加到列表中是这样完成的：

          setFoodList([...foodList, foodObject]);

其中 foodObject 通过解构添加到之前的食物列表中。

更新后的代码沙盒在这里https://codesandbox.io/s/infallible-morse-migmn?fontsize=14&hidenavigation=1&theme=dark

希望您可以查看更改并找到有用的东西

祝你好运:D

如果您需要任何其他帮助或解释，请随时询问，很乐意提供帮助:)