如何在状态中嵌套对象的数组内追加元素？已试写法均无效

嘿，我来帮你捋捋这个问题！你用的concat和扩展运算符[...arr, item]的思路其实是对的，没生效大概率是状态更新的方式或者初始状态的设置出了小问题，我给你拆解一下：

先排查初始状态 #

确保你的guy3.key2初始值是数组类型，如果初始是undefined或者null，那调用concat或者扩展运算符肯定会报错。比如正确的初始状态应该是：

const [state, setState] = useState({
  guy3: {
    key2: [] // 这里必须是数组，不能是undefined/null
  }
});

函数组件中正确的更新写法 #

如果你用的是函数组件+useState，一定要用函数式更新来确保拿到最新的状态（尤其是新状态依赖旧状态的时候），你的写法其实接近正确，但要把整个更新逻辑放在setState的回调里：

setState(prevState => ({
  ...prevState, // 先拷贝整个状态对象
  guy3: {
    ...prevState.guy3, // 拷贝guy3对象
    key2: [...prevState.guy3.key2, item] // 追加元素到key2数组
  }
}));

或者用concat的版本（更简洁，不用给元素包数组）：

setState(prevState => ({
  ...prevState,
  guy3: {
    ...prevState.guy3,
    key2: prevState.guy3.key2.concat(item)
  }
}));

类组件中的写法（如果是类组件的话） #

要是你用的是类组件，setState的写法类似，同样要依赖prevState来确保状态更新的准确性：

this.setState(prevState => ({
  guy3: {
    ...prevState.guy3,
    key2: [...prevState.guy3.key2, item]
  }
}));

避坑提醒 #

• 绝对不要直接修改原状态：比如prevState.guy3.key2.push(item)这种写法是错误的，React状态是不可变的，直接修改不会触发组件重新渲染。
• 可以在更新前打个console.log(item)，确认要追加的元素是你预期的值，避免因为item本身为空导致看起来没生效。

你先检查下初始状态，再用上面的函数式更新写法试试，应该就能搞定啦！

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