React函数组件中如何遍历对象数组切换selected布尔属性

嘿，这事儿不难，咱们直接看怎么实现：

你需要遵循React状态的不可变更新原则——不能直接修改原数组或对象，得返回一个全新的数组来触发状态更新。具体到你的场景，用map方法遍历原数组，给每个对象生成新对象，保留原有属性的同时反转selected的值就行。

完整的handleFilter函数写法如下：

const handleFilter = () => {
  setFilterOptions(prevOptions => 
    prevOptions.map(item => ({
      ...item, // 保留原对象的所有属性（比如title）
      selected: !item.selected // 反转selected的布尔值
    }))
  );
};

为啥这么写？ #

• 用函数式更新（prevOptions => ...）是因为新状态依赖于之前的状态，这样能确保拿到的是最新的状态值，避免状态异步更新带来的偏差。
• map会返回一个全新的数组，每个元素都是新创建的对象，完全符合React的不可变要求，组件才能正确触发重渲染。
• 用...item展开原对象，就算以后你的对象新增其他属性，也不用修改这段代码，直接就能保留所有原有属性，只修改selected，扩展性拉满。

举个实际效果的例子：
初始状态是：

[
  { title: 'highest', selected: true },
  { title: 'lowest', selected: false },
]

调用handleFilter之后，状态会变成：

[
  { title: 'highest', selected: false },
  { title: 'lowest', selected: true },
]

完全满足你“反转所有对象selected属性”的需求～

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