React中调用setState更新likedPosts数组状态不生效是什么原因？

问题原因 #

• setState 本身是异步执行的API，调用后不会立刻修改this.state的值，你在setState后同步打印this.state.likedPosts拿到的还是更新前的旧值，并非更新未生效。如果要拿到更新后的状态，可以在setState的第二个参数（回调函数）中打印验证。
• else分支的写法违反React状态不可变原则：你直接对原this.state.likedPosts数组调用push修改原数据，这种操作是官方不推荐的错误写法，你感知到的“能正常新增”属于副作用，还会干扰后续的状态对比逻辑，是导致你误以为setState不生效的核心诱因。

修复后符合规范的代码 #

handleLike(movieId) {
  // 先判断目标数据是否已存在
  const isExisted = this.state.likedPosts.some(item => item.movie === movieId);
  let newLikedPosts;
  if (isExisted) {
    // 存在则过滤移除，生成新数组
    newLikedPosts = this.state.likedPosts.filter(item => item.movie !== movieId);
  } else {
    // 不存在则拼接生成新数组，不修改原state
    newLikedPosts = [...this.state.likedPosts, { movie: movieId, down: true }];
  }
  // 统一调用setState更新，回调中可以拿到最新状态
  this.setState({ likedPosts: newLikedPosts }, () => {
    console.log("更新后状态：", this.state.likedPosts);
  });
}

你也可以在组件的render方法中打印this.state.likedPosts，只要render正常触发，就代表状态更新成功。

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