React中调用setBlogs设置新值后状态未更新问题

问题重现 #

使用PUT请求更新博客点赞数后，blogs状态始终无法同步更新。已确认API响应数据正确、排序/过滤逻辑无误，传给setBlogs的参数值正确，但状态未发生变化。

相关代码 #

const [blogs, setBlogs] = useState([]);

const sortBlogs = (blogs) =>
  [...blogs].sort((a, b) => Number(b.likes) - Number(a.likes));

const handleLike = async (id) => {
  console.log(blogs[1].likes);
  const response = await blogApi.likeBlog(user, id);
  console.log(response.data.likes);
  let sorted = sortBlogs(
    [...blogs].filter((blog) => blog.id !== id).concat(response.data)
  );
  console.log(sorted[1].likes);
  setBlogs(sorted);
  console.log(blogs[1].likes);
};

useEffect(() => {
  blogService.getAll().then((blogs) => setBlogs(sortBlogs(blogs)));
}, []);

控制台输出 #

71
72
72
71

已尝试的方法 #

• 用异步函数触发状态更新，排查异步导致的状态更新问题
• 重构handleLike函数结构
• 先设置状态为过滤后的数组（不含新条目）再添加新条目，但旧条目未被移除
• 创建基于状态的刷新函数，通过设置状态为true强制React刷新，并在useEffect中将其设回false

问题根源 #

1. 闭包陷阱：handleLike函数创建时捕获了当时的blogs状态值，后续异步操作完成后，使用的依然是旧的blogs值，导致状态更新基于旧数据，无法正确覆盖。
2. 状态更新异步性：React的setState是异步批量更新的，调用setBlogs后立即访问blogs，得到的还是更新前的旧值，这也是最后一行console.log输出71的原因。

解决方案 #

1. 使用函数式更新获取最新状态 #

修改handleLike，让setBlogs接收一个函数，函数参数是当前最新的状态值，基于这个值进行更新，彻底避免闭包问题：

const handleLike = async (id) => {
  const response = await blogApi.likeBlog(user, id);
  // 使用函数式更新，prevBlogs是当前最新的状态
  setBlogs(prevBlogs => {
    // 过滤掉旧的博客，拼接新的博客数据
    const updatedBlogList = prevBlogs.filter(blog => blog.id !== id).concat(response.data);
    // 返回排序后的新数组
    return sortBlogs(updatedBlogList);
  });
};

2. 正确验证状态更新 #

不要在setBlogs后立即打印blogs，改用useEffect监听blogs变化来验证：

useEffect(() => {
  console.log('更新后的blogs状态:', blogs);
}, [blogs]);

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