React处理嵌套映射中的多个复选框

Question

尝试处理多个复选框。Android对象在嵌套地图。

问题是，如果我选择了"练习一"的第一个复选框也是"练习2"的第一个复选框得到检查。我想是因为他们有相同的身份证吧!?

exercises-Array:

{"id":1,"title":"Push Volume","exercises":[{"exercise_id":1,"exercise_sets":3},{"exercise_id":2,"exercise_sets":2}],"total_exercises":2]

const [checkedItems, setCheckedItems] = useState([]);
const handleCheckboxChange = (id) => {
const newCheckedItems = [...checkedItems];
const index = newCheckedItems.indexOf(id);
console.log({index});
if (index === -1) {
newCheckedItems.push(id);
//setShowOverlay(true);
} else {
newCheckedItems.splice(index, 1);
setShowOverlay(false);
}

setCheckedItems(newCheckedItems);


};

return (
{map(exercises, (item, i) => (
<Text style={{...innerStyles.item_subtitle, marginBottom:10}}>{item.exercise_title}</Text>
{Array.from({ length: item.exercise_sets }).map((_, setIndex) => (
<View style={{ flexDirection: 'row' }} key={setIndex}>
<Text style={innerStyles.HeaderTitle} key={setIndex}>
{Strings.ST82} {setIndex + 1} 
</Text>


<View style={{ flex: 1, justifyContent: 'center', marginLeft:20  }}>
<Checkbox.Android
key={`Check-${item.exercise_id}-${setIndex}`}
color={ColorsApp.PRIMARY}
uncheckedColor={'#b9b9b9'}
status={checkedItems.includes(item.exercise_id && setIndex) ? 'checked' : 'unchecked'}
onPress={() => handleCheckboxChange(setIndex)}
/>
</View>
</View>
))}
))}
)

Answer 1

用(${item.exercise_id}-${setIndex})生成唯一密钥

<Checkbox.Android
key={`Check-${item.exercise_id}-${setIndex}`}
color={ColorsApp.PRIMARY}
uncheckedColor={'#b9b9b9'}
status={checkedItems.includes(`${item.exercise_id}-${setIndex}`) ? 'checked' : 'unchecked'}
onPress={() => handleCheckboxChange(`${item.exercise_id}-${setIndex}`)}
/>