Question

我一直致力于添加到收藏夹功能。基本上，我有两个图标图像，一个是白色背景颜色的心脏，另一个是红色背景心脏。我的物体是房子。每个房子都可以用houseNumber表示，houseNumber是由数字和字母组成的字符串（字母数字）。

当视图为特定房屋加载时，我想检查当前houseNumber是否已保存在收藏夹中（asyncStorage）。如果是，则显示红色。如果它不是收藏夹的一部分，那么显示空白的心脏

这是我的_updateList方法，在组件安装时调用：

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

在componentDidMount上，调用_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

您正在使用两个不同的密钥来访问AsyncStorage实例（＆＃34;收藏夹＆＃34;以及＆＃34; listOfLikes＆＃34;）。您必须在两个地方使用相同的密钥。

Answer 2

您遇到的问题与setState异步有关。您需要将您的逻辑放在setState回调中。您可以更多地了解here。

状态更新可能异常

React可以批量多个setState()   调用单个更新以获得性能。

因为this.props和this.state可以异步更新，所以   不应该依赖它们的值来计算下一个状态。

示例 （未经测试）

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

使用AsyncStorage无法正常使用React Native添加到收藏夹/收藏夹？

2 个答案: