React Native - 非同期ストレージ情報は、componentWillMount（）の後に抽出されます。

AsyncStorageを使用してチェックボックスがオンになっているかどうかを確認します。私は、アプリケーションをリロードすると、私はログから、正しい情報が格納されている非同期変数の内部を参照してください。しかし、componentWillMountの後にロードされます。そのため、チェックボックスはチェックされていません。React Native - 非同期ストレージ情報は、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ですべてを置く場合に違いはありません。

出典

2017-07-03 Ioana Surdu Bob

ありがとうございました。私はかなり待っていると確信していますが、私は答えを得る前に問題を解決しました。私がやったことは、最初は状態を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-06 10:32:51

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-03 19:58:58 EnriqueDev

非同期関数の戻り値は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 }); 
    }) 
    }

出典

2017-07-04 14:04:09

React Native - 非同期ストレージ情報は、componentWillMount（）の後に抽出されます。

答えて

関連する問題