从存储在 asyncstorage react-native 中的 json 对象返回值答案

【问题标题】：return value from json object stored in asyncstorage react-native从存储在 asyncstorage react-native 中的 json 对象返回值
【发布时间】：2017-11-22 19:22:47
【问题描述】：

我在 AsyncStorage 中存储了一个 json 对象，现在我想检索它的值。

在实际代码中，打印的值为[object Object]。

我希望打印嵌套在对象中的 json 值。

有什么建议吗？

import React, { Component } from 'react';

import {
  Text,
} from 'react-native';

    class Inside extends Component {

        render() {
          async function getItem(item) {
            try {
              const value = await AsyncStorage.getItem(item).then((val) => {
                return JSON.parse(val);
              });
              return value;
            } catch (err) {
              if(err) {
                throw err;
              }
            }
          }
          return (
            <Text>{getItem('userdata').toString()}</Text>
          );
        }
      }

    export default Inside;

【问题讨论】：

JSON.stringify(getItem('userdata')) 应该可以解决问题

标签： json react-native asyncstorage

【解决方案1】：

如果你有 stringify {email: 'test@test.com'} 并使用 AsyncStorage 存储它，那么你可以解析 email 的值：

let value = await getItem('userdata');
return (
        <Text>{JSON.parse(value).email}</Text>
       );

【讨论】：

【解决方案2】：

您的课程存在一些问题。

理想情况下，您不希望在渲染中使用函数或直接函数调用（尤其是异步函数）。

执行此操作的正确方法是在渲染之外创建该异步函数，在 constructor 或 componentDidMount 生命周期期间调用该函数，发送结果以使用 setState 更新组件状态，并在渲染。

这或多或少... React 方式：

class Inside extends Component {
  constructor() {
    super()
    this.state = {
      itemString: "",
    }

    this.item = this.getItem('userdata')
  }

  async getItem(item) {
    try {
      const value = await AsyncStorage.getItem(item).then(val => {
        this.setState({ itemString: val })
        return JSON.parse(val)
      });
      return value
    } catch (err) {
      throw err
    }
  }

  render() {
    return (
      <Text>{this.state.itemString}</Text>
    );
  }
}

export default Inside

【讨论】：