React中如何为数组内每个对象默认设置checked属性？

你可以用Array.map()方法轻松实现这个需求，它会返回一个全新的数组，完美契合React中状态不可变的原则，不会修改原API返回的数据。

方法一：使用扩展运算符（推荐） #

当你获取到API响应后，遍历数组中的每个对象，复制原对象的所有属性并添加checked: false：

// 假设apiResponse是你从API获取到的对象数组
const updatedFilterArray = apiResponse.map(item => {
  // 扩展运算符复制原属性，再追加checked属性
  return { ...item, checked: false };
});

// 更新state
this.setState({ filter: updatedFilterArray });

方法二：直接修改原对象（不推荐） #

如果你不介意修改原API返回的数组，可以用forEach遍历添加属性，但这种方式会改变原数据，在React状态管理中可能引发不可预期的问题，所以尽量避免：

apiResponse.forEach(item => {
  item.checked = false;
});

this.setState({ filter: apiResponse });

补充说明 #

• 扩展运算符...会创建原对象的浅拷贝，对于嵌套对象的情况如果需要深拷贝，你可能需要用JSON.parse(JSON.stringify(item))这类方式，但你的示例中都是基础类型属性，浅拷贝足够用了。
• 如果你是在类组件的生命周期方法（比如componentDidMount）中获取API数据，直接在获取数据后处理并更新state即可。

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