React中如何切换对象键名、克隆原有值后再新增新值

修正后完整代码 #

// 该变量存储你要操作的目标键，取值可选 'french'/'italian'/'german'
const desiredCuisine = 'italian' 
const valueToAdd = "Pizza"

const [cuisines, setCuisines] = useState({
  french: [],
  italian: [],
  german: []
})

const handleClick = (desiredTargetKey) => {
  setCuisines((prev) => ({
    ...prev,
    // 方括号包裹变量实现动态键匹配
    [desiredTargetKey]: [...(prev[desiredTargetKey] || []), valueToAdd]
  }))
}

// 调用示例：把Pizza加入desiredCuisine对应的数组
// handleClick(desiredCuisine)

修改说明 #

• 动态键必须用方括号[]包裹：对象字面量中直接写变量名作为键时，会被识别为固定字符串键，加方括号才会读取变量的实际值作为键名。
• 修正数组读取来源：状态更新函数的入参prev就是修改前的最新cuisines状态，直接从prev读取对应键的数组即可，原代码误用的adToPublish属于无效引用。
• 增加兜底逻辑：|| []避免传入不存在的键时，解构undefined导致的报错。

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