React：将有状态对象拼接至数组的正确实现方法

嘿，我来帮你搞定这个问题～ 首先要明确React中state的核心原则：状态是不可变的，所以我们永远不能直接修改原有的state数组，必须返回一个全新的数组引用，这样React才能正确识别状态变化并触发重渲染。

你给出的concat写法其实本身是符合不可变要求的，但可能是组件初始化时没正确设置people的初始值？或者我们可以用更简洁的方式来实现：

方法1：使用扩展运算符（推荐，更直观） #

扩展运算符...可以轻松复制原数组的所有元素，再把新元素追加到末尾，生成一个全新的数组：

appendPerson() {
  const newPerson = { name: '', age: '', school: '' };
  this.setState((prevState) => ({
    people: [...prevState.people, newPerson]
  }));
}

方法2：使用concat（你原本的写法，只要初始state正确就没问题） #

concat方法本身不会修改原数组，而是返回一个包含原数组元素和新元素的新数组，所以你的写法是对的，但要确保组件初始化时people是一个空数组：

// 组件构造函数里要初始化state
constructor(props) {
  super(props);
  this.state = {
    people: [] // 必须初始化为数组，否则concat会报错
  };
  // 别忘了绑定方法（如果不用箭头函数的话）
  this.appendPerson = this.appendPerson.bind(this);
}

appendPerson() {
  const newPerson = { name: '', age: '', school: '' };
  this.setState((prevState) => ({
    people: prevState.people.concat([newPerson])
  }));
}

关键注意点： #

• 一定要用函数式的setState：也就是接收prevState作为参数的回调形式，因为React的state更新是异步的，这种方式能确保我们基于最新的状态来更新，避免出现状态不一致的问题。
• 不要直接修改原数组：比如绝对不能写prevState.people.push(newPerson)，因为push会修改原数组，违反不可变性原则，React可能无法检测到状态变化。

这样修改后，每次调用appendPerson都会生成一个新的people数组，正确更新组件的不可变状态啦～

内容的提问来源于stack exchange，提问作者alt-rock