React Native应用启动时如何正确访问AsyncStorage并传递数据至组件

这个问题我太有共鸣了——React组件确实不能是异步函数，直接在渲染流程里调用异步方法肯定会遇到数据还没返回就渲染的问题。咱们可以用React的状态管理和副作用钩子来完美解决这个问题，具体步骤如下：

1. 把initVals改成组件状态 #

首先，我们需要将原来的全局变量initVals替换成组件的状态，这样当数据加载完成后，状态更新会自动触发组件重新渲染：

import { useState, useEffect } from 'react';
// ...其他导入

// 在你的主组件内部
const [initVals, setInitVals] = useState(null); // 初始值设为null表示未加载完成

2. 用useEffect在组件挂载时加载数据 #

接下来，使用useEffect钩子在组件第一次挂载时执行AsyncStorage的读取操作，拿到数据后更新状态：

useEffect(() => {
  const fetchStoredData = async () => {
    try {
      const jsonValue = await AsyncStorage.getItem('@1629349495937');
      if (jsonValue !== null) {
        setInitVals(JSON.parse(jsonValue));
      } else {
        // 如果没有存储的数据，可以设置默认值或者保持null
        // setInitVals({});
      }
    } catch (e) {
      console.error('读取AsyncStorage数据失败:', e);
    }
  };

  fetchStoredData();
}, []); // 空依赖数组确保这个操作只在组件挂载时执行一次

3. 处理加载状态，避免渲染undefined #

因为数据加载是异步的，在initVals还没拿到的时候，我们可以先显示一个加载状态，避免WidgetGenerator拿到undefined：

// 在主组件的return之前添加判断
if (!initVals) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>加载中...</Text>
      {/* 你也可以用ActivityIndicator组件替换成加载动画 */}
    </View>
  );
}

4. 保持WidgetGenerator不变（无需改成async） #

现在initVals是组件状态，当它更新时，主组件会重新渲染，WidgetGenerator就能拿到正确的初始化值了，原来的WidgetGenerator代码完全不用改：

function WidgetGenerator(props) {
  switch (props.args[0]) {
    case "heading":
      return <UIComponents.UIHeading text={props.args[1]} id={props.id} init={initVals[props.id]} />;
    case "checkbox":
      return <UIComponents.UICheckbox text={props.args[1]} id={props.id} callback={props.callback} init={initVals[props.id]} />;
    default:
      return <View />;
  }
}

完整修改后的主组件代码示例 #

import { useState, useEffect, View } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
// 导入你的UIComponents

export default function YourMainComponent() {
  const [initVals, setInitVals] = useState(null);
  const [widgetArray, setWidgetArray] = useState([]); // 假设你已经定义了widgetArray

  useEffect(() => {
    const fetchStoredData = async () => {
      try {
        const jsonValue = await AsyncStorage.getItem('@1629349495937');
        if (jsonValue !== null) {
          setInitVals(JSON.parse(jsonValue));
        }
      } catch (e) {
        console.error('读取存储数据失败:', e);
      }
    };

    fetchStoredData();
  }, []);

  // 处理加载状态
  if (!initVals) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>加载中...</Text>
      </View>
    );
  }

  const collectData = () => {
    // 你的collectData逻辑
  };

  const submitData = () => {
    // 你的submitData逻辑
  };

  return (
    <View>
      {widgetArray.map((data, index) => (
        <WidgetGenerator key={index} id={index} args={data} callback={collectData} />
      ))}
      <UIComponents.UISubmitButton callback={submitData} />
    </View>
  );
}

function WidgetGenerator(props) {
  switch (props.args[0]) {
    case "heading":
      return <UIComponents.UIHeading text={props.args[1]} id={props.id} init={initVals[props.id]} />;
    case "checkbox":
      return <UIComponents.UICheckbox text={props.args[1]} id={props.id} callback={props.callback} init={initVals[props.id]} />;
    default:
      return <View />;
  }
}

为什么这个方案可行？ #

• useEffect确保异步数据加载只在组件挂载时执行一次，符合应用启动时加载数据的需求。
• 状态initVals更新时会触发组件重新渲染，这时候WidgetGenerator就能拿到最新的存储数据，不会再出现undefined的情况。
• 完全遵守React的规则，不需要把组件改成async函数，避免了React渲染流程的冲突。

内容的提问来源于stack exchange，提问作者Nicholas Carpenedo