响应本机-尝试从存储在localstorage中的json对象呈现单个值

问题描述

我创建了一个登录组件，在其中将json对象存储在asynStorage中，它工作正常.问题是，当我尝试从asynStorage获得价值时，我在屏幕上什么都没得到.

I created a login component where i stored a json object in asynStorage it is working fine.Problem is that when i trying to get the value from asynStorage, i am not getting anything on screen.

<Text> { this.state.getValue } </Text> 

这行代码让我在屏幕上看到了整个json.

This line giving me the whole json like this on screen.

[{
  "id":"9",
  "uname":"mine",
  "uemail":"[email protected]",
  "upass":"nomination"
}]

我只想显示电子邮件，所以我正在写此行这条线什么也没给我.

I want display the email only so i am writing this lineThis line giving me nothing.

<Text> { this.state.getValue.uemail } </Text>

我的组件代码是这样的

export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
           getValue:''
        };
    }

    componentDidMount() {
      let userData = AsyncStorage.getItem('user').then(value => {
        this.setState({ getValue : value })
      });
    }

  render() {
    return (
        <View style={{marginTop:30, marginLeft:20, marginRight:20, marginBottom:30}}>
            <Text> { this.state.getValue } </Text> 
            <Text> { this.state.getValue.uemail } </Text>          
        </View>
    );
  }
}

我需要再问一件事，我在登录组件中使用此代码，但是在按注销并从syncStorage中删除项目之后，它甚至会返回主屏幕，请告诉我为什么?.

One more thing i need to ask that,I am using this code in Login component but after pressing logout and removing item from syncStorage it is even going to home screen after that, please tell me why ?.

componentDidMount() {
  let userData = AsyncStorage.getItem('user');
  if(userData){
    this.props.navigation.navigate('Home');
  }
}

推荐答案

在使用 AsyncStorage 时，我们必须了解它仅保留字符串.因此，它仅读取和写入字符串化的JSON.这将起作用:

When working with AsyncStorage we must understand that it only keep strings. So it only read and write stringified JSON. This will work:

 constructor(props){
    super(props);
    this.state = {
      getValue: null, //<-- initialize null
    }
 }

 componentDidMount() {
    AsyncStorage.getItem('user').then(value => {
      this.setState({ getValue: JSON.parse(value) }); //read like a stringified JSON
    });
 }

 render() {
    return (
      <View>
        <Text>Tela2 : {this.state.getValue ? this.state.getValue[0].uemail : ''}</Text>
      </View>
    );
  }

对于写操作:

  const a = [
    {
      "id": "9",
      "uname": "mine",
      "uemail": "[email protected]",
      "upass": "nomination",
    },
  ];
  AsyncStorage.setItem('user', JSON.stringify(a));//<-- stringify your array here

结果:

更新:添加用于迭代的代码

考虑前面的代码，可以渲染所有数组元素:

Considering the previous code, to render all array elements do it:

 constructor(props){
    super(props);
    this.state = {
      getValue: [], //<-- in this case, start as empty array
    }
 }

 render() {
   return (
     <View>
       {this.state.getValue.map(value => {
         return(<Text>{value.uemail}</Text>)
       })}
     </View>
   );
 }

这篇关于响应本机-尝试从存储在localstorage中的json对象呈现单个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！