React Native中遍历对象数组删除指定项并更新state的实现方法

现有代码问题梳理 #

• 复选框属性绑定错误：CheckBox_1的checked属性应为布尔值（标识当前选项是否被勾选），而非点击回调，点击事件需要绑定到onChange/onPress属性（根据你使用的组件库调整）
• 状态修改逻辑错误：直接操作原状态数组的引用、使用slice（不会修改原数组，且参数使用错误，删除操作应该用splice但也不推荐直接修改原状态）、未定义的变量c都会导致逻辑失效
• 逻辑分支冗余：不需要单独判断数组是否为空，直接通过查找就能实现新增/删除的切换

正确实现方案 #

1. 修正复选框属性绑定

<CheckBox_1 
  checked={checkedTaskList.some(item => item.summary === calendar.summary)} 
  onPress={() => setTaskCheked(calendar)} 
/>

这里用summary作为唯一标识判断是否勾选，你也可以换成日历的id等唯一字段，如果calendar是同一个引用对象可以直接用item === calendar判断

2. 重写setTaskCheked函数

const setTaskCheked = (calendar) => {
  // 判断当前日历是否已经在勾选列表中
  const isChecked = checkedTaskList.some(item => item.summary === calendar.summary);
  if (isChecked) {
    // 已勾选时过滤掉当前日历，返回新数组更新状态
    setCheckedTaskList(checkedTaskList.filter(item => item.summary !== calendar.summary));
  } else {
    // 未勾选时将当前日历加入数组，返回新数组更新状态
    setCheckedTaskList([...checkedTaskList, calendar]);
  }
}

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