Как установить значение состояния для массива в реагировать родной?

Question

У меня есть функциональный компонент, ListKeys. Когда он загружается, я хочу установить пустой массив ключей, равный списку всех ключей, извлеченных из хранилища. Вот что я получил на данный момент:

 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;

Этот код правильно получает список ключей и выводит его на консоль. Это делается в строке 16: console.log(allKeys);

Однако, когда я тогда setKeys(allKeys);, это не работает. Я знаю это, потому что строка 9: console.log(keys) выводит пустой массив.

Я предполагаю, что не могу просто установить массив значений состояния для другого массива, но у меня недостаточно опыта с JS или Реагируйте Родной, чтобы знать почему.

Может кто-нибудь сказать мне, как правильно установить массив keys в массив allKeys?

Answer 1

Вам нужно дождаться разрешения loadSavedKeys, прежде чем пытаться установить, так как это 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;

Примечание. Я немного упростил код, поскольку он казался немного более многословным нужно. Они забирают ключи, вам нужно дождаться разрешения getAllKeys, прежде чем вы получите ключи, поскольку они асинхронные.

Кроме того, вам, вероятно, не нужно areKeysLoaded, если вы просто хотите, чтобы это запустить один раз, но я думаю, вы могли бы использовать его вместо индикатора загрузки?