如何在本機反應中將 state 值設置為數組？

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)輸出一個空數組。

我猜我不能只將 state 值數組設置為另一個數組，但我對 JS 或 React Native 的經驗不夠了解原因。

有人能告訴我如何正確地將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 ，但我想您可以使用它來代替加載指示器？