React嵌套Map中Checkbox.Android多选同步异常问题排查

问题现象 #

勾选某练习的第N个复选框时，其他练习的第N个复选框也会被自动勾选，核心原因是复选框的唯一标识与状态判断逻辑错误。

问题根源分析 #

1. 状态判断逻辑错误：原代码中checkedItems.includes(item.exercise_id && setIndex)实际等价于判断是否包含setIndex（因为item.exercise_id为真值，逻辑与运算返回后者），导致不同练习的同序号复选框共用同一个判断条件。
2. 点击事件传参错误：handleCheckboxChange接收的参数是setIndex，不同练习的同序号复选框点击时会操作同一个值，导致选中状态混乱。

修正方案 #

为每个复选框生成唯一标识（结合exercise_id和setIndex），用该标识追踪选中状态，避免不同练习的复选框混淆。

修正后的代码

状态与事件处理函数

const [checkedItems, setCheckedItems] = useState([]);

const handleCheckboxChange = (uniqueId) => {
  setCheckedItems(prevChecked => {
    if (prevChecked.includes(uniqueId)) {
      setShowOverlay(false);
      return prevChecked.filter(id => id !== uniqueId);
    } else {
      // setShowOverlay(true);
      return [...prevChecked, uniqueId];
    }
  });
};

渲染部分

return (
  {map(exercises, (item, i) => (
    <>
      <Text style={{...innerStyles.item_subtitle, marginBottom:10}}>{item.exercise_title}</Text>
      {Array.from({ length: item.exercise_sets }).map((_, setIndex) => {
        const uniqueId = `${item.exercise_id}-${setIndex}`;
        return (
          <View style={{ flexDirection: 'row' }} key={uniqueId}>
            <Text style={innerStyles.HeaderTitle}>
              {Strings.ST82} {setIndex + 1} 
            </Text>
            <View style={{ flex: 1, justifyContent: 'center', marginLeft:20  }}>
              <Checkbox.Android
                key={uniqueId}
                color={ColorsApp.PRIMARY}
                uncheckedColor={'#b9b9b9'}
                status={checkedItems.includes(uniqueId) ? 'checked' : 'unchecked'}
                onPress={() => handleCheckboxChange(uniqueId)}
              />
            </View>
          </View>
        );
      })}
    </>
  ))}
);

关键优化点 #

• 用${item.exercise_id}-${setIndex}作为每个复选框的唯一key和状态标识，确保不同练习的同组复选框拥有独立的状态判断依据。
• 使用函数式更新setCheckedItems(prevChecked => ...)，避免状态更新的竞态问题，保证状态修改基于最新值。

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