React中无法向含数组的useState状态添加新数据求助

你的初始数组状态代码：

const [state, setState] = useState([
  { 
    item: 'apple', // 注意：字符串值需加引号，否则会被视为未定义变量
    color: 'red',
  },{ 
    item: 'banana',
    color: 'yellow',
  }
])

需要添加的对象：

const newObj = { 
  item: 'grape',
  color: 'purple'
}

你之前写法的问题 #

• 第一种写法：setState((prevState) => ({ ...prevState, newObj }))
  把数组展开到对象中，会将原数组转为以索引为键的对象（比如{0: {...}, 1: {...}, newObj: {...}}），状态类型从数组变成对象，无法正确添加数组元素。

• 第二种写法：setState({ state: state.concat(newObj) });
  直接将状态修改为包含state属性的对象，但原状态是数组结构，这会彻底改变状态的结构，导致后续读取数组元素的逻辑全部失效。

正确的更新方式 #

有两种可靠的数组状态更新方法：

1. 使用展开运算符创建新数组（推荐）

setState(prevState => [...prevState, newObj]);

通过函数式更新获取最新的prevState，展开原数组所有元素后追加新对象，返回全新数组，保持状态类型正确。

2. 使用concat方法

setState(prevState => prevState.concat(newObj));

concat方法会返回包含原数组元素和新对象的新数组，不会修改原数组，函数式更新也能确保拿到最新状态值。

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