React中如何给state内的自定义对象追加内容而不覆盖原有值？

问题根源 #

你当前的写法会将每次新增的日志都存在logFood的newLog固定键下，每次提交都会覆盖这个键对应的值，因此看不到历史追加的内容。

可行方案 #

方案1：用唯一标识作为对象键存储（保留logFood为对象类型） #

如果你需要后续快速通过日期、餐次检索对应的日志，推荐用「日期+餐次」的组合作为每个日志的唯一键存储，修改submitFoodLog里的setState逻辑即可：

this.setState((prevState) => ({
    // 用`日期_餐次`作为键，避免键名重复导致覆盖
    logFood: { ...prevState.logFood, [`${date}_${meal}`]: newLog },
}));

这种方案的优势是检索效率高，比如要获取20240520的早餐日志，直接取logFood['20240520_breakfast']即可。

方案2：调整logFood为数组类型存储（适合按序列展示所有日志） #

如果你只需要按提交顺序存储、展示所有食物日志，不需要按键检索，可以把初始state里的logFood改为数组类型：

state = {
  // 其余属性不变，仅修改logFood初始值
  logFood: [],
}

提交时直接把新日志追加到数组末尾即可：

this.setState((prevState) => ({
    logFood: [...prevState.logFood, newLog],
}));

注意事项 #

更新React状态时必须返回全新的对象/数组，不能直接修改原prevState中的属性，否则会违反状态不可变规则，导致组件不重新渲染。

内容的提问来源于stack exchange，提问作者Candace