React Native中如何从AsyncStorage读取并展示数据？

核心问题 #

你的代码存在三个关键错误，导致数据无法正常展示：

1. SetState语法错误：setParsedValue [JSON.parse(value)]; 不是正确的状态更新写法，应该调用状态更新函数。
2. 不必要的数组包装：将解析后的对象用[]包裹，导致parsedValue变成数组而非对象，访问name的路径错误。
3. 异步状态更新的误解：React状态更新是异步的，调用setParsedValue后立刻打印parsedValue，拿到的是更新前的旧值。

修正后的代码 #

1. 修复readProfile函数

const readProfile = async()=>{
  try{
    const value = await AsyncStorage.getItem('userPro');
    if(value !== null){
      console.log(value);
      // 解析JSON并正确更新状态
      const parsedData = JSON.parse(value);
      setParsedValue(parsedData);
      // 直接打印解析后的变量，而非状态（状态更新异步）
      console.log(parsedData);
      return value;
    }  
  }catch (error){
      console.log("We have an error");
      console.log(error);
  }
}

2. 正确展示数据

由于状态初始值可能为null或空对象，建议添加空值判断避免报错：

// 可选链操作符，安全访问属性
<Text>{parsedValue?.name}</Text>

// 或者条件渲染
{parsedValue && <Text>{parsedValue.name}</Text>}

额外说明 #

• 之前尝试的{value.name}无法生效，因为value是readProfile函数的局部变量，组件渲染时无法访问，必须通过状态变量parsedValue获取数据。
• 若需要监听parsedValue的更新，可以使用useEffect：

useEffect(() => {
  console.log('更新后的用户数据:', parsedValue);
}, [parsedValue]);

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