React中如何仅修改数组首个对象指定键值并实现切换功能？

要实现这个需求，核心是遵循React的不可变更新原则——不能直接修改原数组或对象，而是生成新的数组和对象来更新状态。具体实现如下：

完整代码示例 #

import { useState } from 'react';

function App() {
  const [value, setValue] = useState([{test: 0}, {test: 0}]);

  const toggleFirstTest = () => {
    setValue(prevValue => {
      // 取当前第一个对象的test值，计算切换后的值
      const newTest = prevValue[0].test === 0 ? 1 : 0;
      // 创建新数组：首元素替换为更新后的对象，其余元素保持原样
      return [
        {...prevValue[0], test: newTest},
        ...prevValue.slice(1)
      ];
    });
  };

  return (
    <div>
      <button onClick={toggleFirstTest}>切换首元素test值</button>
      <p>当前首元素test值：{value[0].test}</p>
    </div>
  );
}

export default App;

关键细节说明 #

• 函数式更新：用setValue(prevValue => ...)确保拿到最新的状态值，避免闭包导致的状态过期问题
• 不可变操作：通过展开运算符{...prevValue[0]}创建新对象，...prevValue.slice(1)复制原数组后续元素，保证原状态不被直接修改
• 切换逻辑：除了prevValue[0].test === 0 ? 1 : 0，也可以用1 - prevValue[0].test或Number(!prevValue[0].test)实现相同的0/1互转效果

内容的提问来源于stack exchange，提问作者s.kuznetsov