React Native AsyncStorage存储调用与数据渲染问题咨询

1. 是否需要调用_storeData()来保存数据？ #

是的，必须显式调用_storeData()才能执行数据保存操作。你定义的_storeData是异步函数，仅仅定义函数不会自动执行内部逻辑，只有调用它才会触发AsyncStorage.setItem，完成数据存储。

2. 如何正确渲染从AsyncStorage获取的数据？ #

你遇到的错误是因为_retrieveData是异步函数，直接在Text组件中调用会返回Promise对象，而React无法直接渲染Promise（错误信息里的_x, _y, _z, _A就是Promise内部的状态字段）。

正确做法是通过React状态管理处理异步数据：

函数组件示例（推荐） #

import { useState, useEffect } from 'react';
import { Text, View } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const YourComponent = () => {
  const [storedValue, setStoredValue] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const value = await AsyncStorage.getItem("@MySuperStore:key");
        if (value !== null) {
          setStoredValue(value);
        }
      } catch (error) {
        console.error('获取数据失败:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <View>
      <Text>{storedValue ?? '暂无数据'}</Text>
    </View>
  );
};

export default YourComponent;

类组件示例 #

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

class YourComponent extends Component {
  state = {
    storedValue: null
  };

  componentDidMount() {
    this._retrieveData();
  }

  _retrieveData = async () => {
    try {
      const value = await AsyncStorage.getItem("@MySuperStore:key");
      if (value !== null) {
        this.setState({ storedValue: value });
      }
    } catch (error) {
      console.error('获取数据失败:', error);
    }
  };

  render() {
    return (
      <View>
        <Text>{this.state.storedValue ?? '暂无数据'}</Text>
      </View>
    );
  }
}

export default YourComponent;

核心逻辑：在组件生命周期（或useEffect）中异步获取数据，将结果存入组件状态，再渲染状态中的值，避免直接在渲染阶段调用异步函数。

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