Question

如果使用AsyncStorage选中或未选中复选框，则存储。当我重新加载应用程序时，我从日志中看到异步变量中存储了正确的信息。但是，它在componentWillMount之后加载。因此，复选框似乎不会被检查，因为它应该是。

我认为一个好的解决方法是更改异步函数中的复选框属性。你认为那会是一个很好的解决方案吗？您是否有其他建议来显示正确的复选框值？

我的代码：

constructor(props) {
    super(props)
    this.state = {isChecked: false}
    this.switchStatus = this.switchStatus.bind(this)
  }

  async getCache(key) {
    try {
      const status = await AsyncStorage.getItem(key);
      if (status == null)
        status = false
      console.log("my async status is " + status)
      return status
    } catch(error) {
      console.log("error", e)
    }
  }

  componentWillMount(){
    // key string depends on the object selected to be checked
    const key = "status_" + this.props.data.id.toString()
    this.getCache = this.getCache.bind(this)
    this.setState({isChecked: (this.getCache(key) == 'true')})
    console.log("my state is" + this.state.isChecked)
  }

  switchStatus () {
    const newStatus = this.state.isChecked == false ? true : false
    AsyncStorage.setItem("status_" + this.props.data.id.toString(), newStatus.toString());
    console.log("hi my status is " + newStatus)
    this.setState({isChecked: newStatus})
  }

  render({ data, onPress} = this.props) {
    const {id, title, checked} = data
    return (
      <ListItem button onPress={onPress}>
        <CheckBox
          style={{padding: 1}}
          onPress={(this.switchStatus}
          checked={this.state.isChecked}
        />
        <Body>
          <Text>{title}</Text>
        </Body>
        <Right>
          <Icon name="arrow-forward" />
        </Right>
      </ListItem>
    )
  }

如果我在构造函数中将所有内容放在componentWillMount中，则没有区别。

Answer 1

感谢您的回答。我很确定await也会起作用，但在得到答案之前我解决了这个问题。我所做的是在开始时将状态设置为false，然后在getCache中更新它。这样，它将始终在从本地电话存储器获取信息后设置。

async getCache(key) {
    try {
      let status = await AsyncStorage.getItem(key);
      if (status == null) {
        status = false
      }
      this.setState({ isChecked: (status == 'true') })
    } catch(e) {
      console.log("error", e);
    }
  }

Answer 2

你使用了async - await，但你没有在componentWillMount（）中等待你的方法。试试这个：

componentWillMount(){
    // key string depends on the object selected to be checked
    const key = "status_" + this.props.data.id.toString()
    this.getCache =  await this.getCache.bind(this)   // <-- Missed await
    this.setState({isChecked: (this.getCache(key) == 'true')})
    console.log("my state is" + this.state.isChecked)
  }

Answer 3

异步函数的返回值是Promise对象。因此，您必须使用then来访问getCache的已解析值。将您的代码更改为以下内容，它应该可以正常工作。

  componentWillMount(){
    // key string depends on the object selected to be checked
    const key = "status_" + this.props.data.id.toString();
    this.getCache(key).then(status => {
      this.setState({ isChecked: status === true });
    })
  }

React Native - 在componentWillMount（）之后提取异步存储信息

3 个答案: