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

Question

我有一个小型的 React Native 组件，我尝试通过从本地存储(AsyncStorage)读取值来初始化状态。但是当我从构造函数调用外部方法时，我得到 未定义 作为状态值。

这是我的代码的一部分:

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

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

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

如果您需要从 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 的事实来渲染正确的 View :

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

以下是一些值得阅读的文章:

• https://medium.com/@bluepnume/learn-about-promises-before-you-start-using-async-await-eb148164a9c8
• https://medium.learnreact.com/setstate-is-asynchronous-52ead919a3f0
• https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296
• https://medium.learnreact.com/setstate-takes-a-function-56eb940f84b6