Javascript 如何在React Native中动态创建复选框 功能屏幕（）{ const[lvls，setLvls]=React.useState（[]）； const[done，setDone]=React.useState（null）； const[toggleCheckBox，setToggleCheckBox]=React.useState（false） React.useffect（（）=>{ 异步函数checkData（）{ const data=await AsyncStorage.getAllKeys（）； setLvls（数据）； } checkData（）； setDone（真）； }, []); 返回( {done&&（lvls.length）( lvls.map（（元素，i）=>{ 返回( setToggleCheckBox（newValue）} /> {lvls[i]} ) }) ): ( 不 )} ); }

我的目标是动态呈现与

lvls

中的每个元素对应的复选框。 我目前正在这样做，但是所有复选框共享相同的状态

toggleCheckbox

。

---

如何根据lvls为每个复选框创建唯一状态？

您可以创建一个

对象，该对象将存储所有复选框值

const[toggleCheckBox，setToggleCheckBox]=React.useState（{}）
设置切换复选框({
…切换复选框，
[i] ：！toggleCheckBox[i]
})}
/>

在代码中放置

功能屏幕（）{
const[lvls，setLvls]=React.useState（[]）；
const[done，setDone]=React.useState（null）；
const[toggleCheckBox，setToggleCheckBox]=React.useState（{}）
React.useffect（（）=>{
异步函数checkData（）{
const data=await AsyncStorage.getAllKeys（）；
setLvls（数据）；
}
checkData（）；
setDone（真）；
}, []);
返回(
{done&&（lvls.length）(
lvls.map（（元素，i）=>{
返回(
设置切换复选框({
…切换复选框，
[i] ：！toggleCheckBox[i]
})}
/>
{lvls[i]}
)
})
):
(
不
)}
);
}
有趣的是，复选框状态（togglecheckbox[i]）是否在现场初始化？它以空对象开头，因此所有值都将返回未定义。当执行onValueChange时！undefined返回true。当已为true并执行onValueChange时，将返回false。
function Screen() {
 const [lvls, setLvls] = React.useState([]);
  const [done, setDone] = React.useState(null);
  const [toggleCheckBox, setToggleCheckBox] = React.useState(false)

  React.useEffect(() => { 
    async function checkData() {
        const data = await AsyncStorage.getAllKeys();
        setLvls(data);
    }
    checkData();
    setDone(true);
  }, []);

  return (
      <View>
          {done && (lvls.length) ? (
                  lvls.map((element, i) => {
                    return (
                    <View key={i} style={{flexDirection: 'row'}}>

                      <CheckBox
                        disabled={false}
                        value={toggleCheckBox}
                        onValueChange={(newValue) => setToggleCheckBox(newValue)}
                      />

                      <Text style={styles.text}>{lvls[i]}</Text>

                    </View>)
                  })
                  ):
                (
                  <Text style={styles.emptyText}>NO</Text>
          )}
      </View>
    );
}