Javascript 在何处调用AsyncStorage.getItem（）函数以在react native中加载保存的数据？

我在react原生项目的一个类中保存了一个数据。保存数据后，我开始一个新屏幕。在该屏幕中，我正在检索保存的数据。为此，我在render函数中调用AsyncStorage.getItem（'token'）函数

下面是该类的代码-

import React from 'react';
import { StyleSheet, Text, View, Image, AsyncStorage } from 'react-native';
import {Icon, Button, Container, Header, Content, Left} from 'native-base';
import CustomHeader from './CustomHeader';

 class NoteMeHome extends React.Component {
  state = {
    text:'',
    storedValue:'',
    getValue: ''
  };

  static navigationOptions = ({navigation}) => ({
    title: "Home",
    headerLeft: <Icon name="ios-menu" style={{paddingLeft:10}}
    onPress={()=>navigation.navigate('DrawerOpen')}/>,

    drawerIcon: 

    <Image source={require('../assets/icon.png')}
            style={styles.icon}
    />
  })

  render() {
    const {storedValue} = this.state;

    AsyncStorage.getItem('token').then(value =>
      //AsyncStorage returns a promise so adding a callback to get the value
      this.setState({ getValue: value })
      //Setting the value in Text 
    );

    return(
      <Container>
        <CustomHeader
          title="Home"
          drawerOpen={()=>this.props.navigation.navigate('DrawerOpen')}
        />
        <Content contentContainerStyle={{flex:1, alignItems:'center', 
        justifyContent:'center', padding:10}}>
        <Button full onPress={()=> this.props.navigation.navigate('Settings')}>
          <Text style={{color:'white'}}>{storedValue}</Text>
        </Button>
        <Text>{this.state.getValue}</Text>
        </Content>
      </Container>
    )
  }

}

const styles = StyleSheet.create({
  icon:{
    height: 24,
    width: 24
  }
})
export default NoteMeHome;

---

要删除警告？

IMO，您应该在屏幕开始时使用

componentDidMount

。要使用

异步存储

请记住，这是一个

异步

函数，因此必须等待函数完成，才能获取值。

有关react native组件的更多信息，请参阅

有关使用

async

等待异步存储的更多信息，请参见示例

以下是我的想法：

从“React”导入React；
从“react native”导入{样式表、文本、视图、图像、异步存储}；
从“本机基础”导入{图标、按钮、容器、标题、内容、左侧}；
从“/CustomHeader”导入CustomHeader；
类NoteMeHome扩展了React.PureComponent{
状态={
文本：“”，
storedValue:“”，
getValue:“”
};
静态导航选项=（{navigation}）=>({
标题：“家”，
headerLeft:navigation.navigate（'drawerropen'）}/>，
付款人：
});
componentDidMount（）{
const token=await AsyncStorage.getItem（'token'）；
this.setState（{getValue:token}）；
}
render（）{
const{storedValue，getValue}=this.state；
返回(
this.props.navigation.navigate（'drawerropen'）}
/>
this.props.navigation.navigate（'Settings'）}>
{storedValue}
{getValue}
)
}
}
const styles=StyleSheet.create({
图标：{
身高：24，
宽度：24
}
})
导出默认NoteMeHomerender（）

中的code>应始终保持纯净。千万不要在渲染函数中设置状态，这是一个非常糟糕的做法，在一个简单的组件中，它可能工作得很好。它之所以有效，是因为它具有异步性

您应该使用

componentDidMount

lifecycle方法从本地存储获取数据

componentDidMount() {
    const token = await AsyncStorage.getItem('token');
    this.setState({ getValue: token });
}

---

我想你更多的是一个哲学问题。在我看来，您应该尝试使用钩子来设置状态，甚至更好：将“AsyncStorage”调用放在componentDidUpdate（）函数中。最后一次渲染以某种方式触发，组件已卸载，但在上次渲染中启动的异步调用将在组件卸载时继续。请使用代码详细说明您的描述，因为我没有正确获取它。我在componentDidUpdate（）函数内的render函数外部调用了AsyncStorage。但这一次它没有检索到值。这会产生一个错误：Promise被忽略

componentDidMount() {
    const token = await AsyncStorage.getItem('token');
    this.setState({ getValue: token });
}