Question

我已经在我的本机项目的一个类中保存了一个数据。保存数据后，我开始一个新屏幕。在该屏幕中，我正在检索保存的数据。为此，我在渲染函数内调用 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;

此后，在运行项目时，在上述类中，当我单击任意抽屉项转到另一个屏幕时，它在控制台中显示以下错误-

警告：无法在未安装的设备上调用setState（或forceUpdate）零件。这是空操作，但表示您的内存泄漏应用。要修复，请取消所有订阅和异步任务在componentWillUnmount方法中。

我想 AsyncStorage.getItem（'token'）函数调用出了点问题，因为如果我删除该函数，它不会显示任何警告。

所以，如果有人帮助我知道我应该在哪里调用以下代码，那就太好了

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

要删除警告？

Answer 1

Asif，

这就是我的想法：

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.PureComponent {
  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}
    />
  });
  
  componentDidMount() {
    const token = await AsyncStorage.getItem('token');
    this.setState({ getValue: token });
  }

  render() {
    const {storedValue, getValue} = this.state;
    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>{getValue}</Text>
        </Content>
      </Container>
    )
  }

}

const styles = StyleSheet.create({
  icon:{
    height: 24,
    width: 24
  }
})
export default NoteMeHome;

由于您没有任何道具，我不知道您是否应该尝试处理组件的更新。

此致

Answer 2

IMO，您应该在屏幕开始处使用componentDidMount进行任何操作。要使用AsyncStorage，请记住这是一个asynchronous函数，因此您必须等待该函数完成才能获取值。

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

有关使用async'等待'AsyncStorage的更多信息，请参阅this示例

Answer 3

在React组件render()中应始终保持纯净。永远不要在render函数中设置状态，这是一个非常糟糕的实践，在一个简单的组件中它可能会正常工作。由于异步性，它只能工作。

您应该使用componentDidMount生命周期方法从本地存储中获取数据。

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

在哪里调用AsyncStorage.getItem（）函数以将存储的数据加载到react-native中？

3 个答案: