在应用程序加载时反应本机 AsyncStorage 访问答案

【问题标题】：React Native AsyncStorage Access on App Load在应用程序加载时反应本机 AsyncStorage 访问
【发布时间】：2021-10-20 20:55:30
【问题描述】：

我需要在应用程序打开时立即从 AsycStorage 访问数据以传递给我的功能之一 WidgetGenerator。但是，似乎没有办法调用getData() 并等待它设置initVals 的值，它只是继续在WidgetGenerator() 中顺序执行代码并将undefined 传递给它返回的组件，因为getData() 还没有回来。此外，当我将 WidgetGenerator 设为异步函数时，它似乎并不喜欢它。我该怎么做才能在加载时访问 AsyncData？

const getData = async () => {
        try {
            const jsonValue = await AsyncStorage.getItem('@1629349495937')
            if (jsonValue != null) {
                //console.log(JSON.parse(jsonValue));
                initVals = JSON.parse(jsonValue);
            }
        } catch(e) {
            // error reading value
        }
    }

    function WidgetGenerator(props) {
        
        switch (props.args[0]) {
            case "heading":
                return <UIComponents.UIHeading
                            text={props.args[1]}
                            id={props.id}
                            init={initVals ? initVals[props.id] : undefined}
                        />;
            case "checkbox":
                return <UIComponents.UICheckbox
                            text={props.args[1]}
                            id={props.id}
                            callback={props.callback}
                            init={initVals ? initVals[props.id] : undefined}
                        />;
        }
        
        return <View />;
    }
    
    return (
        <View>
            {widgetArray.map((data, index) => <WidgetGenerator key={index} id={index} args={data} callback={collectData}/>)}
            <UIComponents.UISubmitButton callback={submitData} />
        </View>
        
    );

}

【问题讨论】：

标签： javascript react-native async-await asyncstorage

【解决方案1】：

缺少一些代码片段，无法完整了解到底发生了什么，但我想我还是明白了。所以你必须解决可用的策略：

使用同步存储解决方案，可以直接获取数据
异步获取数据，在加载时显示加载指示器或类似内容

使用同步存储解决方案

如果您能够安装本机依赖项，则可以安装用于同步数据访问的库，例如 react-native-mmkv。只需浏览它的文档，应该很简单。

异步加载数据

有很多方法可以做到这一点。理想情况下，您在应用启动时加载您的应用数据一次，同时显示启动屏幕，并将数据存储在全局存储中（可以像 JS 对象一样简单），这样您就可以在运行时直接访问它们。但是，react 中异步数据加载的一般模式如下所示：

function Component() {
  const [data, setData] = useState();
  const [isError, setIsError] = useState(false);

  // load the data
  useEffect(() => {
    const asyncAction = async () => {
      try {
        const _data = await getData();
        setIsError(false);
        setData(data);
      } catch (e) {
        setIsError(true);
      }
    }
  }, []);

  if (isError) {
    return // view indicating an error
  }

  if (data == null) {
   return // view indicating loading
  }

  return <View>{/* actual implementation that is using data*/}</View>
}

有很多关于这个主题的教程，你可以google。

【讨论】：