Fatal编程技术网
  • asynchronous/
  • Asynchronous React Native-在componentWillMount（）之后提取异步存储信息

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

asynchronous react-native

Asynchronous React Native-在componentWillMount（）之后提取异步存储信息,asynchronous,react-native,native-base,asyncstorage,Asynchronous,React Native,Native Base,Asyncstorage,如果选中复选框或未使用异步存储，则我正在存储。当我重新加载应用程序时，我从日志中看到，在异步变量中存储了正确的信息。但是，它是在componentWillMount之后加载的。因此，复选框不会显示为已选中，这是应该的 我认为一个好的解决方法是在异步函数中更改复选框属性。你认为这是个好办法吗？对于显示正确的复选框值，您还有其他建议吗 我的代码： constructor(props) { super(props) this.state = {isChecked: false}

如果选中复选框或未使用异步存储，则我正在存储。当我重新加载应用程序时，我从日志中看到，在异步变量中存储了正确的信息。但是，它是在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>
    )
  }

构造函数（道具）{
超级（道具）
this.state={isChecked:false}
this.switchStatus=this.switchStatus.bind（this）
}
异步getCache（密钥）{
试一试{
const status=await AsyncStorage.getItem（键）；
如果（状态==null）
状态=错误
log（“我的异步状态是”+状态）
返回状态
}捕获（错误）{
console.log（“错误”，e）
}
}
组件willmount（）{
//键字符串取决于要检查的选定对象
const key=“status”+this.props.data.id.toString（）
this.getCache=this.getCache.bind（this）
this.setState（{isChecked:[this.getCache（key）='true'））
log（“我的状态是”+this.state.isChecked）
}
开关状态（）{
const newStatus=this.state.isChecked==false？true:false
AsyncStorage.setItem（“status_389;”+this.props.data.id.toString（），newStatus.toString（））；
log（“嗨，我的状态是”+newStatus）
this.setState（{isChecked:newStatus}）
}
render（{data，onPress}=this.props）{
常量{id，title，checked}=data
返回(
{title}
)
}
如果我将componentWillMount中的所有内容都放在构造函数中，则没有区别。

您使用了async-wait，但您没有在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)
  }

componentWillMount（）{
//键字符串取决于要检查的选定对象
const key=“status”+this.props.data.id.toString（）

this.getCache=wait this.getCache.bind（this）//异步函数的返回值是一个Promise对象。因此您必须使用
然后使用
来访问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 });
    })
  }



谢谢你的回答。我很确定等待也会起作用，但我在得到答案之前解决了问题。我所做的是在开始时将状态设置为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);
    }
  }