React中onClick事件数组.push仅生效一次，提示.push不是函数问题

看起来你遇到的问题是第一次点击按钮能正常把ID加入数组，但后续点击时ids变量不再是数组，导致.push()报错。这通常是因为你在更新ids状态时，不小心把它从数组类型改成了其他类型（比如单个ID值）。

核心原因 #

你的初始state里ids是数组[]，第一次调用.push()没问题，但如果更新state的时候直接赋值为单个ID（比如this.setState({ ids: newId })），那下一次ids就变成了数字/字符串，自然没有.push()方法。而且React要求状态更新必须遵循不可变性原则，直接修改原数组（比如this.state.ids.push()）本身就是错误的做法，会导致状态更新异常。

正确的修复方式 #

你需要通过创建新数组的方式来更新ids状态，推荐使用setState的函数式更新（接收prevState参数），确保每次更新都基于最新的状态值：

1. 编写点击事件处理函数

handleAddEmployeeId = (employeeId) => {
  // 基于当前最新的state创建新数组，添加新ID
  this.setState(prevState => ({
    ids: [...prevState.ids, employeeId]
  }));
}

或者用concat方法（效果一致）：

handleAddEmployeeId = (employeeId) => {
  this.setState(prevState => ({
    ids: prevState.ids.concat(employeeId)
  }));
}

2. 遍历员工列表时绑定事件

结合你的构造函数代码，在render里遍历员工并绑定点击事件：

render() {
  return (
    <div className="employee-list">
      {this.state.employees.map(employee => (
        <div key={employee.id} className="employee-item">
          <p>{employee.name} (ID: {employee.id})</p>
          <button onClick={() => this.handleAddEmployeeId(employee.id)}>
            添加ID到列表
          </button>
        </div>
      ))}
    </div>
  );
}

关键注意事项 #

• 永远不要直接修改state中的数组/对象（比如this.state.ids.push()），必须通过创建新的数组/对象来更新状态，React依赖这种不可变性来检测变化并触发重新渲染。
• 使用函数式更新（prevState）可以避免异步更新导致的状态不一致问题，确保每次更新都基于最新的state值。

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