React Native勾选单个复选框时所有复选框同步选中问题修复

列表内所有复选框绑定了同一个toggleCheckBox布尔状态，任意复选框触发修改时，更新的是这一个全局状态，所有复用该状态的复选框会同步切换选中态。

• 把单个布尔值的状态，改成用对象存储每一个列表项独立的选中状态，以每个产品条目的唯一ID作为键区分不同条目
• 渲染复选框时，不再读取全局统一的布尔值，而是读取当前条目对应在状态对象里的选中值
• 复选框状态变更时，只更新当前条目对应的状态字段，不影响其他条目

// 用对象存储各条目选中状态，key为产品唯一id，value为选中布尔值
const [checkedMap, setCheckedMap] = useState({});

return (
  <>
    <Provider>
      {userProducts.length > 0 ? (
        userProducts.map(userProduct => (
          <ListItem
            // 列表项必须配置唯一key，避免增删条目时出现状态错位
            key={userProduct.id}
            title={
              userProduct.product + '             val: ' + userProduct.val
            }
            trailing={
              <CheckBox
                disabled={false}
                // 读取当前条目对应的选中状态，未配置时默认未选中
                value={Boolean(checkedMap[userProduct.id])}
                onValueChange={newValue => {
                  setCheckedMap(prev => ({
                    ...prev,
                    [userProduct.id]: newValue
                  }))
                }}
              />
            }
          />
        ))
      ) : (
        <Text>Nothing in your list yet</Text>
      )}
    </Provider>
  </>
);

• 不要用数组遍历的下标作为列表项的key，也不要用下标作为选中状态的键，否则列表排序、增删条目时会出现选中状态串位的问题
• 如果后续需要实现全选、反选、获取所有选中项的功能，直接操作checkedMap对象即可：全选就把所有产品id对应的value设为true，获取选中项就筛选value为true的id集合

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