使用 map() 在 react-native 中处理复选框

Question

我正在使用'@react-native-community/checkbox'，因为我正在从数据库中检索数据并使用 map 函数将其渲染为带有复选框的复选框，问题是当我选中一个框时，所有框都已选中，而当我取消选中时相同 问题在于每个复选框的状态，但我不知道如何处理它，因为我只想选中 sleeted 复选框并将其所有数据放入一个数组中以供进一步处理。

这里是我渲染为复选框的数据：

{"id": "12345", "price": 5, "text": "Reload"}

这是map函数的代码：

{data.map((b, index) => {
         return (
                   <View key={b.id} style={{ flex: 1, flexDirection: 'column', width: windowWidth, paddingLeft: 15, paddingRight: 15 }}>
                   <View style={{ flexDirection: 'row-reverse', alignItems: 'center', justifyContent: 'space-between' }}>
                          <CheckBox
                             disabled={false}
                             value={checked}
                             onValueChange={(newValue) => { setIschecked(newValue) }}

                            />

                          <Text>{b.text}   </Text>
                   </View>

                   <View style={{ flexDirection: 'row', alignItems: 'center' }}>

                         <Text style={{ fontSize: 10, fontWeight: 'bold', color: COLORS.darkgray }}>  
                            {" USD " + b.price} 
                         </Text>
                   </View>



              </View>
           )
       })} 

我发现了一个与我的问题完全相同的问题 this one 但不幸的是，这对我不起作用

感谢并提前

Answer 1

您必须将复选框的状态与数据本身分开存储在 React 状态中。

首先在第一次渲染时创建一个空对象，这将作为复选框ids 与其选中值的映射：

const [checked, setChecked] = React.useState({});

在您的map 中，您可以找到基于b.id 的特定复选框的值：

value={checked[b.id]}

最后，在你的回调中，确保你更新了checked 中的正确值，同样基于b.id：

onValueChange={(newValue) => { setChecked({...checked, [b.id]: newValue}) }}

把它们放在一起：

const [checked, setChecked] = React.useState({});

// rest of your render function

     {data.map((b, index) => {
         return (
                   <View key={b.id} style={{ flex: 1, flexDirection: 'column', width: windowWidth, paddingLeft: 15, paddingRight: 15 }}>
                   <View style={{ flexDirection: 'row-reverse', alignItems: 'center', justifyContent: 'space-between' }}>
                          <CheckBox
                             disabled={false}
                             value={checked[b.id]}
                             onValueChange={(newValue) => { setChecked({...checked, [b.id]: newValue}) }}

                            />

                          <Text>{b.text}   </Text>
                   </View>

                   <View style={{ flexDirection: 'row', alignItems: 'center' }}>

                         <Text style={{ fontSize: 10, fontWeight: 'bold', color: COLORS.darkgray }}>  
                            {" USD " + b.price} 
                         </Text>
                   </View>



              </View>
           )
       })}