Javascript 将项目添加到平面列表时出现问题

饮食（屏幕）

导出类饮食扩展组件{
建造师（道具）{
超级（道具）；
此.state={
食物清单：[]，
};
}
render（）{
返回(
item.key.toString（）}
renderItem={（数据）=>(
{data.item.foodName}
{data.item.carries}
)}
/>

食品创建（屏幕）

导出类FoodCreate扩展组件{
建造师（道具）{
超级（道具）；
此.state={
食物：空，
卡路里：零，
食物清单：[]，
};
}
提交食物=（食物、卡路里）=>{
这是我的国家(
{
食物清单：[
…这个.state.foodList，
{
关键字：Math.random（），
食物名称：食物，
卡路里：卡路里，
},
],
},
() => {
this.props.navigation.navigate（“节食”{
foodList:this.state.foodList，
});
}
);
};
render（）{
返回(
this.setState（{food}）
/>
this.setState（{carries}）
/>
{
this.submitFood（this.state.food，this.state.carries）；
}}
/>

---

大家好，我正在尝试制作一个应用程序，其中用户必须在

FoodCreate

屏幕中插入

foodName

和

Carries

，一旦他点击

复选标记，它就会将
foodName
和
Carries
添加到
Diet
屏幕中的
Flatlist
（当我启动Expo时，出现的第一个屏幕是
Diet
屏幕）。当我插入第一个食物项时，一切正常，但当我想插入另一个食物项时，我之前插入的食物项会消失，并且只显示我刚才插入的食物项。我不知道这是否与平面列表或React导航有关。但平面列表不会保留我插入的食物项。
这里的问题是导航方式作品
每次打开FoodCreate屏幕时，组件将再次装入，FoodList将重置，因此新添加的一个将是其中唯一的项目，您将此作为参数返回到Diet屏幕，该屏幕将仅显示一个项目

这里有一个更好的方法

将状态管理移到饮食屏幕

class Diet extends Component {
  constructor(props) {
    super(props);

    this.state = {
      foodList: [],
    };
  }
 
 // Use this to update state.
  static getDerivedStateFromProps(props, state) {
    if (props.route.params?.food) {
      return { foodList: [...state.foodList, props.route.params.food] };
    }
    return null;
  }

并在平面列表中显示状态中的值

 <FlatList data={this.state.foodList} ...

更简单的方法是切换到功能组件，您可以参考此处的文档

class Diet extends Component {
  constructor(props) {
    super(props);

    this.state = {
      foodList: [],
    };
  }
 
 // Use this to update state.
  static getDerivedStateFromProps(props, state) {
    if (props.route.params?.food) {
      return { foodList: [...state.foodList, props.route.params.food] };
    }
    return null;
  }

 <FlatList data={this.state.foodList} ...

submitFood = (food, calories) => {
 
        this.props.navigation.navigate("Diet", {
          food: {
            key: Math.random(),
            foodName: food,
            calories: calories,
          },
        });
  }