如何在本机反应中将 state 值设置为数组？

Question

I have a functional component, ListKeys . When it loads I want to set an empty array of keys equal to a list of all keys extracted from storage. Here is what I've got at the moment:

 const ListKeys = props => {
    const [keys, setKeys] = useState([]);
    const [areKeysLoaded, setAreKeysLoaded] = useState(false);

    useEffect(() => {
        if(!areKeysLoaded){
            loadSavedKeys();
            setAreKeysLoaded(true);
            console.log(keys)
        }
    });

    async function loadSavedKeys(){
        try {
            var allKeys = await AsyncStorage.getAllKeys();
            console.log(allKeys);
            setKeys(allKeys);
        }
        catch {
            console.log("Error: Cannot access saved data.");
        }
    }

    return (
        <View></View>
    );

};

export default ListKeys;

This code correctly gets the list of keys and outputs it to the console. This is done on line 16: console.log(allKeys);

However, when I then setKeys(allKeys); , this doesn't work. I know this because line 9: console.log(keys) outputs an empty array.

I'm guessing I can't just set a state value array to another array but I'm not experienced enough with JS or React Native to know why.

Can someone tell me how to properly set the keys array to the allKeys array?

Answer 1

You need to wait for the loadSavedKeys to resolve first before trying to set since it is async :

const ListKeys = props => {
    const [keys, setKeys] = useState([]);
    const [areKeysLoaded, setAreKeysLoaded] = useState(false);

    useEffect(() => {
      if (areKeysLoaded) return
      AsyncStorage
        .getAllKeys()
        .then((keys) => {
          setAreKeysLoaded(true)
          setKeys(keys)
        })
        .catch(e => console.error(e));
    }, []);

    return (
        <View></View>
    );

};

export default ListKeys;

Note I simplified the code a bit since it seemed a little more verbose then necessary. They key take away is you need to wait for getAllKeys to resolve before you'll get the keys since it is asynchronous.

Also, you prob don't need areKeysLoaded if you just want this to run once, but I guess you could use it instead for a loading indicator?