Javascript 如何在平面列表中呈现复选框

我在平面列表中创建了一个复选框，但当我单击该复选框时，所有复选框都将呈现。我想在按下复选框而不是整个复选框时呈现复选框。 这是我的密码

const ScreenCart = () => {
  const [checked, setChecked] = useState(false)
  const renderItem = ({ item, index }) => {
    return (
      <View style={styles.list}>
          <View style={{ flexDirection: 'row' }}>
            <CheckBox
              checkBoxColor={COLORS.ORANGE}
              isChecked={checked}
              onClick={() => setChecked(!checked)}
            />
            <Image
              source={item.image}/>
            <View>
              <Text numberOfLines={1} style={[styles.item, { width: 210 * rate }]}>{item.name} 
              </Text>
            </View>
          </View>
      </View>
    )
  }
  return (
    <View style={{ backgroundColor: COLORS.WHITE, flex: 1 }}>
      <View style={{ flex: 1 }}>
         <Flatlist
          data={TEMP_DATA_CART}
          renderItem={renderItem}
          keyExtractor={(item) => item.id.toString()}>
         />
      </View>
  )

---

您设置了一个全局状态，使其选中所有项目的复选框

删除此文件

const [checked, setChecked] = useState(false)

const [checked, setChecked] = useState([]);

设置所选id的数组

const [checked, setChecked] = useState(false)

const [checked, setChecked] = useState([]);

按“在阵列中设置id”并从阵列中设置检查状态

<CheckBox
    checkBoxColor={COLORS.ORANGE}
    isChecked={checked.includes(item.id)}
    onClick={() => {
      const newIds = [...checked];
      const index = newIds.indexOf(item.id);
      if (index > -1) {
        newIds.splice(index, 1); 
      } else {
        newIds.push(item.id)
      }
      setChecked(newIds)
    }}
   />

---

要检索所选的id，您可以从

选中的
数组中获取
您已将所有复选框的状态链接到单个状态。您需要创建多个状态，并将每个状态设置为与临时数据购物车数组的ID相关。（不推荐）或将useState创建为数组，在其中存储对象，如{id:1，checked:false}