Question

我有一个小的React Native组件，在其中我尝试通过从本地存储（AsyncStorage）读取值来初始化状态。但是，当我从构造函数调用外部方法时，会得到 undefined 作为状态值。

这是我的代码的一部分：

constructor(props) {
    super(props);
    this.state = {
       languageChecked: I18n.locale, 
       anonymityChecked: this.pickLocalKey('anonymity', true), 
       locationChecked: this.pickLocalKey('location', false),  
       notificationChecked: this.pickLocalKey('notification', false),
       statisticsChecked: this.pickLocalKey('statistics', false),
    };
    console.log("STATE: " + this.state.anonymityChecked); // UNDEFINED
}

pickLocalKey(key, defaultValue) {
  AsyncStorage.getItem(key).then((value) => {
    const item = (value !== null && value !== undefined) ? value : defaultValue;
    console.log(item);
    return item;
  });
}

有人知道如何解决此问题吗？预先谢谢你

Answer 1

您在问题中粘贴的代码存在多个问题。

首先constructor是同步的，您尝试在其中执行异步任务。这不是一个好主意。

如果您需要从AsyncStorage加载值并将其存储在state中，则应该在componentDidMount

中进行操作

因此，请在构造函数中设置初始值，并添加一个附加值loaded: false。这将在以后变得很重要。

constructor (props) {
  super(props);
  this.state = {
    languageChecked: I18n.locale,
    anonymityChecked: true,
    locationChecked: false,
    notificationChecked: false,
    statisticsChecked: false,
    loaded: false // <- add this additional value
  };
}

当前，您的pickLocalKey函数实际上未返回任何内容。返回值被困在一个Promise中。幸运的是，我们可以将函数转换为使用async/await。所以它应该看起来像这样：

pickLocalKey = async (key, defaultValue) => {
  try {
    let value = await AsyncStorage.getItem(key);
    const item = (value !== null && value !== undefined) ? value : defaultValue;
    return item === 'true'; // this will make sure we get a Boolean back as long as you store strings 'true' and 'false' for your Booleans
  } catch (error) {
    return defaultValue;
  }
}

请注意，await可能会抛出，因此始终最好将其包装在try/catch中。

然后在您的componentDidMount中进行调用以从AsyncStorage检索值

async componentDidMount () {
  // these won't throw as we are catching the error before it gets here
  let anonymityChecked = await this.pickLocalKey('anonymity', true);
  let locationChecked = await this.pickLocalKey('location', false);
  let notificationChecked = await this.pickLocalKey('notification', false);
  let statisticsChecked = await this.pickLocalKey('statistics', false);
  // set all items in state in one go as multiple calls to setState are not good
  this.setState({
    anonymityChecked,
    locationChecked,
    notificationChecked,
    statisticsChecked,
    loaded: true . // <- we set loaded to true
  }, () => console.log(this.state)); // this is how you check state after it has been set
}

然后在您的render中使用loaded现在为true的事实来呈现正确的视图：

render () {
  if (this.state.loaded) {
    return (
      this is the view that you actually want to show
    )
  } else {
    return (
      this is the view that you will show when everything is loading
    )
  }
}

以下一些文章值得阅读：

Answer 2

替换

pickLocalKey(key, defaultValue) {
  AsyncStorage.getItem(key).then((value) => {
    const item = (value !== null && value !== undefined) ? value : defaultValue;
    console.log(item);
    return item;
  });
}

与

constructor(props) {
    super(props);
    this.pickLocalKey('anonymity', true, 'anonymityChecked');
    this.pickLocalKey('location', false, 'locationChecked');
    this.pickLocalKey('notification', false, 'notificationChecked');
    this.pickLocalKey('statistics', false, 'statisticsChecked')
    this.state = {
    };
}

pickLocalKey = (key, defaultValue, stateKey) => {
  AsyncStorage.getItem(key).then((value) => {
    const item = (value !== null && value !== undefined) ? value : defaultValue;
    console.log(item);
    this.setState({
     [stateKey]: item
    });

  });
}

render() {
 console.log(this.state);
}

编辑：所以问题是这是一个诺言，现在构造函数只运行一次，而不是等待您的诺言解决。同样，您不能也不想使您的构造函数成为一个承诺。一旦取回数据，就无法设置数据。但是您先调用该函数，然后再执行setState。然后查看渲染中的状态，希望您会看到正确的状态。

React Native问题-通过调用构造函数中的另一个方法初始化状态

2 个答案: