0

I am storing if a checkbox is checked or not using AsyncStorage. When I reload the app, I see from logs that inside the asynchronous variable the correct information is stored. But, it is loaded after componentWillMount. Because of that, the checkbox does not appear checked, as it should be.

I think a good workaround will be to change the checkbox properties inside the asynchronous function. Do you think that would be a good solution? Do you have other suggestions for showing the correct checkbox value?

My code:

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

There is no difference if I put everything in componentWillMount in the constructor.

4

3 回答 3

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);
    }
  }
于 2017-07-06T10:32:51.917 回答
0

您使用了 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)
  }
于 2017-07-03T19:58:58.590 回答
0

异步函数的返回值是一个 Promise 对象。所以你必须使用thengetCache的resolved值来访问。将您的代码更改为以下内容，它应该可以工作。

  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 });
    })
  }
于 2017-07-04T14:04:09.477 回答