setState后组件未更新：使用字典存储卡片帖子点赞数

看起来你遇到的问题是因为直接修改了state中的对象引用，导致React无法检测到state的变化，所以没有触发组件重渲染。React的state更新依赖于引用的改变——如果更新后的state和原state引用相同，React会认为数据没有变化，就不会重新渲染组件。

问题核心 #

你在likeClicked里如果是直接修改this.state.like_dict的属性，再把同一个对象放回state，比如：

// 错误示例：直接修改原state对象
this.state.like_dict[poid] = newCount;
this.setState({ like_dict: this.state.like_dict });

这种写法不会触发重渲染，因为like_dict的引用没有变，React浅比较后认为state没更新。

正确的解决方案 #

你需要创建一个新的对象来更新like_dict，而不是修改原有的state对象。推荐使用函数式的setState（因为更新依赖于之前的state值），结合扩展运算符或者Object.assign来生成新对象：

1. 使用扩展运算符（推荐）

likeClicked = (poid, type) => {
  // 计算新的点赞数：如果poid不存在则默认0，根据type增减
  const newCount = (this.state.like_dict[poid] || 0) + (type === 0 ? 1 : -1);
  
  // 用函数式setState确保拿到最新的prevState
  this.setState(prevState => ({
    like_dict: {
      ...prevState.like_dict, // 复制原有所有键值对
      [poid]: newCount // 更新当前poid的点赞数
    }
  }));
}

2. 使用Object.assign

如果不熟悉扩展运算符，也可以用Object.assign来创建新对象：

likeClicked = (poid, type) => {
  const newCount = (this.state.like_dict[poid] || 0) + (type === 0 ? 1 : -1);
  
  this.setState(prevState => ({
    like_dict: Object.assign({}, prevState.like_dict, { [poid]: newCount })
  }));
}

额外优化：处理未初始化的点赞数 #

当like_dict中还没有poid这个键时，this.state.like_dict[poid]会返回undefined，导致Text显示空白。可以给个默认值：

<Text>{this.state.like_dict[poid] || 0}</Text>

这样修改后，每次点击点赞按钮时，都会生成一个新的like_dict对象，React检测到引用变化，就会触发组件重渲染，更新点赞数的显示了。

内容的提问来源于stack exchange，提问作者Caitlin Wen