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