在 React Native 中从 AsyncStorage 获取值后渲染组件

Question

我的 React 组件将用户的设置存储在 AsyncStorage 中并在加载时获取它们。存储和获取数据运行良好，但存在组件在从异步函数获取值之前呈现的问题。这怎么能解决？这是我的代码：

import React from 'react';
import { View } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import { Media } from '../constants';

class SettingsScreen extends React.Component {
  
  constructor(props) {
    super(props);
    const settings = ['appLanguage', 'colorTheme'];
    for(const i of settings) {
      this.getData(i).then(
        value => {
          if(value === null || value === undefined) {
            this.state[i] = Media.initalSettings[i];
          }
          else {
            this.state[i] = value;
          }
        }
      );
    }
  }

  async storeData(key, value) {
    try {
      if(key[0] != '@') {
        key = '@' + key;
      }
      await AsyncStorage.setItem(key, value);
    } 
    catch(e) {
      console.warn(e);
    }
  }

  async getData(key) {
    try {
      if(key[0] != '@') {
        key = '@' + key;
      }
      const value = await AsyncStorage.getItem(key);
      return value;
    } 
    catch(e) {
      console.warn(e);
    }
  }

  render() {

    const { appLanguage } = this.state;

    return (
      <>
        <View>
          {appLanguage}
        </View>
      </>
    )
  }
}

export default SettingsScreen;

Answer 1

您似乎正试图直接在构造函数中设置状态。试试这个：

  constructor(props) {
    super(props);
    const settings = ['appLanguage', 'colorTheme'];
    for(const i of settings) {
      this.getData(i).then(
        value => {
          if(value === null || value === undefined) {
            this.state[i] = Media.initalSettings[i];
          }
          else {
            this.setState({key: value})
          }
        }
      );
    }
  }

这是一些文档： https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly

Answer 2

你的构造函数太混乱了。

初始化一个空状态变量并在页面加载时填充它

constructor(props){
  super(props)
  
  this.state = {
    storedValue = ""
  }
}

async componentDidMount() {
  const storedValue = await AsyncStorage.getItem("settings");
  this.setState({storedValue})
}

render(){
  return (
    <View>
      <Text>{storedValue}</Text>
    </View>
  )
}

在 React Native 中从 AsyncStorage 获取值后渲染组件

Render component after getting value from AsyncStorage in React Native

javascript

reactjs

react-native

asyncstorage