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中的对象，通常不称为字典

组件在setState之后不会更新

2 个答案: