Блог

 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 amp;amp; (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>
    );
}
  

Моя цель — динамически отображать флажок, соответствующий каждому элементу в lvls .
В настоящее время я делаю это, однако все флажки имеют одинаковое состояние toggleCheckbox .
Как я могу создать уникальные состояния для каждого флажка в соответствии с lvls?

Вы можете создать object , который будет хранить все значения флажков.

 const [toggleCheckBox, setToggleCheckBox] = React.useState({})

                      <CheckBox
                        disabled={false}
                        value={toggleCheckBox[i] ? true : false}
                        onValueChange={() => 
                          setToggleCheckBox({
                            ...toggleCheckBox,
                            [i] : !toggleCheckBox[i]
                            })}
                      />
  

Размещение в вашем коде…

 function Screen() {
 const [lvls, setLvls] = React.useState([]);
  const [done, setDone] = React.useState(null);
  const [toggleCheckBox, setToggleCheckBox] = React.useState({})

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

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

                      <CheckBox
                        disabled={false}
                        value={toggleCheckBox[i] ? true : false}
                        onValueChange={() => 
                          setToggleCheckBox({
                            ...toggleCheckBox,
                            [i] : !toggleCheckBox[i]
                            })}
                      />

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

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