为什么输入的onChange事件会更改对象数组中的多个状态值？

输入的onChange事件会更改对象数组中的多个状态值的原因是因为在React中，状态（state）是不可变的，即不能直接修改状态的值。当我们需要更新状态时，需要创建一个新的状态对象，并将其赋值给原来的状态。

在输入的onChange事件中，通常会使用事件对象（event）来获取输入框的值。当输入框的值发生变化时，onChange事件会被触发，然后我们可以通过事件对象获取到最新的输入值。接着，我们可以使用这个新的输入值来创建一个新的状态对象，并将其赋值给原来的状态。

如果对象数组中有多个状态值需要更新，我们可以通过使用展开运算符（spread operator）来创建一个新的状态对象，并只更新需要修改的状态值，而不影响其他状态值。这样做的好处是可以确保状态的不可变性，避免出现意外的副作用。

举例来说，假设我们有一个对象数组的状态值：

const [users, setUsers] = useState([
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
]);

如果我们想要更新其中一个用户的年龄，可以使用展开运算符来创建一个新的状态对象，并只更新需要修改的状态值：

const handleChange = (event, userId) => {
  const { value } = event.target;
  
  setUsers(prevUsers => prevUsers.map(user => {
    if (user.id === userId) {
      return { ...user, age: value };
    }
    return user;
  }));
};

在上面的例子中，我们使用了map函数来遍历原来的用户数组，当找到需要更新的用户时，使用展开运算符创建一个新的用户对象，并只更新年龄属性。其他用户对象保持不变。

这样，通过输入的onChange事件，我们可以更改对象数组中的多个状态值，同时保持状态的不可变性。