如何在本机反应中将 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 ，但我想您可以使用它来代替加载指示器？