Javascript 从React Native中的AsyncStorage获取值后呈现组件

我的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;

从“React”导入React；
从“react native”导入{View}；
从“@react native community/async storage”导入异步存储；
从“../constants”导入{Media}；
类设置屏幕扩展React.Component{
建造师（道具）{
超级（道具）；
常量设置=['ApplLanguage'，'colorTheme']；
用于（设置的常数i）{
这个.getData（i）.然后(
值=>{
如果（值===null | |值===未定义）{
this.state[i]=Media.initalSettings[i]；
}
否则{
该状态[i]=值；
}
}
);
}
}
异步存储数据（键、值）{
试一试{
如果（键[0]！=“@”）{
键='@'+键；
}
等待AsyncStorage.setItem（键、值）；
} 
捕获（e）{
控制台。警告（e）；
}
}
异步getData（密钥）{
试一试{
如果（键[0]！=“@”）{
键='@'+键；
}
const value=await AsyncStorage.getItem（键）；
返回值；
} 
捕获（e）{
控制台。警告（e）；
}
}
render（）{
const{appllanguage}=this.state；
返回(
{应用语言}
)
}
}
导出默认设置屏幕；

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

  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})
          }
        }
      );
    }
  }

以下是一些文档：

---

你的构造函数太乱了

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

构造函数（道具）{
超级（道具）
此.state={
storedValue=“”
}
}
异步组件didmount（）{
const storedValue=await AsyncStorage.getItem（“设置”）；
this.setState（{storedValue}）
}
render（）{
返回(
{storedValue}
)
}

我会在组件中设置默认值，然后在异步函数完成后将其传入。这样，当组件更新后，它将重新呈现。通常，如果在呈现组件之前没有获取组件所需的参数，则可能应该在该组件中使用条件呈现（即，检查所需参数是否存在，如果存在，则正常呈现，如果不存在，则呈现加载或null）@rhigdon，在调用异步函数之前，我尝试移动

this.state[I]=Media.initalSettings[I]

，但是没有任何变化。您不应该直接设置状态。您应该使用setState助手函数。@rhigdon，谢谢您的建议，我认为在组件的构造函数中禁止调用setState，但在获得数据后，我将

this.state[I]=value

更改为

this.setState（{key:value}）

，并且工作正常。你可以写一个答案，我会把它标记为解决方案