setState之后組件未更新

Question

我使用字典將喜歡的帖子存儲在每張卡中。

constructor(props) {
  super(props);
  this.state = {
    like_dict: {}
  };
  this.likeClicked = this.likeClicked.bind(this)
}

我在每張卡上都有一個“喜歡”按鈕，並且文字表示喜歡的次數。

<Button transparent onPress={() => {this.likeClicked(poid, 0)}}>
    <Icon name="ios-heart-outline" style={{ color: 'black' }} />
</Button>
<Text>{this.state.like_dict[poid]}</Text>

likedClicked函數如下所示。 我設置了like_dict的狀態，但是上面的文本不會重新顯示。

likeClicked(poid, liked){
  var like_dict_tmp = this.state.like_dict
  if (liked){
    like_dict_tmp[poid] -= 1
  }else{
    like_dict_tmp[poid] += 1
  }
  this.setState({
    like_dict: like_dict_tmp
  })
}

Answer 1

React的主要原則之一是永遠不要直接改變狀態。

當您執行var like_dict_tmp = this.state.like_dict ， like_dict_tmp在狀態中引用了同一對象，因此更改like_dict_tmp會直接使狀態發生變化，因此后續的setState將不會更新組件。

您可以使用var like_dict_tmp = { ...this.state.like_dict }創建淺表副本，或將整個函數替換為：

this.setState((prevState) => ({
  like_dict: {
    ...prevState,
    [poid]: (prevState[poid] || 0) + (liked ? 1 : -1),
  },
}));

Answer 2

您需要在修改狀態之前復制狀態。 您正在做的只是在like_dict_tmp中創建到狀態的鏈接（或者使用我在下面做的事情，或者將concat與一個空數組一起使用）：

var like_dict_tmp = this.state.like_dict.concat([])

likeClicked(poid, liked) {
  var like_dict_tmp = this.state.like_dict.slice()
  if (liked) {
    like_dict_tmp[poid] -= 1
  } else {
    like_dict_tmp[poid] += 1
  }
  this.setState({
    like_dict: like_dict_tmp
  })
}

另外，{}是JS中的對象，通常不稱為字典