AsyncStorage를 사용하여 React Native의 즐겨 찾기/좋아요에 추가 하시겠습니까?

Question

나는 즐겨 찾기 기능에 추가 작업을하고 있습니다. 기본적으로 두 개의 아이콘 이미지가 있습니다. 하나는 흰색 배경 색상의 심장이고, 다른 하나는 빨간색 배경 심장입니다. 내 개체가 집입니다. 각 집은 houseNumber로 나타낼 수 있습니다. houseNumber는 숫자와 문자 (영숫자)로 구성된 일련의 문자입니다.

특정 하우스에 대한보기가로드되면 현재 houseNumber가 이미 즐겨 찾기 (asyncStorage)에 저장되어 있는지 확인하고 싶습니다. 그러면 빨간색으로 표시됩니다. componentDidMount에

async _updateList() { 
    const response = await AsyncStorage.getItem('listOflikes'); 
    const listOfLikes = await JSON.parse(response) || []; 
    this.setState({ 
     favorites: listOfLikes 
    }); 
    console.log(this.state.favorites); 
    if (listOfLikes.includes(this.props.houseNumber)) { 
    this.setState({ isLiked: true }); 
    } 
    else { 
    this.setState({ isLiked: false }) 
    } 
    console.log(this.state.isLiked); 
} 

의 _updateList가 호출 : 그것은 즐겨 찾기의 일부가 아닌 경우, 빈 색의 마음을 표시

여기

구성 요소 마운트에라고 내 _updateList 방법은이다 :

componentDidMount() { 
    console.log(this.props.houseNumber); 
    console.log(this.props.latitude); 
    console.log(this.props.longitude); 
    this._updateList(); 
} 

이제 집이 즐겨 찾기에 추가되지 않았습니다. 하트 이미지를 클릭하면 현재 붉은 마음이 표시되고 현재 집 번호가 asyncStorage에 추가 될 것으로 예상됩니다. 그러나 즐겨 찾기는 여전히 빈 배열이며 비어있는 청취 이미지가 표시됩니다. 마음이 같이보기에 표시됩니다

async _addToFavorites() { 
    const listOfHouses = [...this.state.favorites, this.props.houseNumber]; 

    await AsyncStorage.setItem('favorites', 
    JSON.stringify(listOfHouses)); 
    this._updateList(); 
    } 

_onPressHeartButton() { 
     if(this.state.isLiked){ 
    // remove from favorites 
    } 
    else{ 
    // add to favorites 
    this._addToFavorites(); 
    } 
    } 

renderHeart() { 
    if (this.state.isLiked) { 
    return (
     <Image 
     source={require('./images/ic_like_pressed.png')} 
     style={{ 
      width: '50%', 
      height: '50%', 
      alignItems: 'flex-end', 
      alignSelf: 'center', 
      marginTop: 0, 
      resizeMode: 'contain', 
      marginBottom: 0, 
      paddingBottom: 0, 
      marginLeft: '20%' 
     }} 
     /> 
     ); 
    } 
    else { 
    return (
     <Image 
     source={require('./images/ic_like_normal.png')} 
     style={{ 
      width: '50%', 
      height: '50%', 
      alignItems: 'flex-end', 
      alignSelf: 'center', 
      marginTop: 0, 
      resizeMode: 'contain', 
      marginBottom: 0, 
      paddingBottom: 0, 
      marginLeft: '20%' 
     }} 
     /> 
    ); 
    } 
} 

: 다음은 함수의 나머지는

<TouchableWithoutFeedback onPress={this._onPressHeartButton.bind(this)} > 
    {this.renderHeart()} 
</TouchableWithoutFeedback> 

Answer 1

. 두 위치에서 동일한 키를 사용해야합니다.

Answer 2

당신이 setState되는 비동기 관련되어 발생하는 문제. 로직을 setState 콜백에 넣어야합니다. 자세한 내용은 here을 참조하십시오.

주 업데이트

이 setState() 통화 성능을 위해 하나의 갱신으로 5 월 배치 여러 반응 비동기 할 수있다.

this.props 및 this.state가 비동기 적으로 업데이트 될 수 있으므로 은 다음 상태를 계산할 때 값에 의존하지 않아야합니다. (테스트되지 않음)

예당신은 AsyncStorage 인스턴스 ("즐겨 찾기"와 "listOfLikes을")에 액세스하기위한 두 개의 서로 다른 키를 사용하는

async _updateList() { 
    const response = await AsyncStorage.getItem('listOflikes'); 
    const listOfLikes = await JSON.parse(response) || []; 
    this.setState({ 
    favorites: listOfLikes 
    },() = > { 
    console.log(this.state.favorites); 
    if (listOfLikes.includes(this.props.houseNumber)) { 
     this.setState({ 
     isLiked: true 
     }); 
    } 
    else { 
     this.setState({ 
     isLiked: false 
     }) 
    } 
    console.log(this.state.isLiked); 
    }); 
}