响应本机-尝试从存储在localstorage中的json对象呈现单个值 [英] react native - trying to render single value from json object stored in localstorage

问题描述

我创建了一个登录组件，在其中将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":"[e-mail]",
  "upass":"nomination"
}]

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

I want display the email only so i am writing this line This 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": "[e-mail]",
      "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对象呈现单个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！