useState管理数组对象状态更新失效，异常问题求助

我声明了如下的useState对象：

const [comments, setComments] = useState({
  step_up: [],        toe_walking: [],
  toe_touches: [],    squat: [],
  side_to_side: [],   rolling: [],
  leg_lifts: [],      hand_to_knees: [],
  floor_to_stand: [], chair_elevation: [],    
  jumping_jacks: [],  jump_rope: [],
  bear_crawl: []
})

通过Recoil状态获取到大量comment对象，希望将每个comment按对应的主题分类（例如step_up类型的comment存入comments对象中的step_up数组），通过useEffect执行分类逻辑但未达到预期：

useEffect(() => {
  let allComments = selectedClient.plan.comments
  for( let i = 0; i < selectedClient.plan.comments.length; i ++) {
    let tag = allComments[i].videoId
    console.log(tag)
    if (comments[tag]) {
      let newArr = [...comments[tag]]
      newArr.push(allComments[i])
      let newObj = { ...comments }
      newObj[tag] = newArr
      setComments(comments => ({ ...newObj }))
    }
  }
  setLoading(false)
}, [selectedClient])

控制台日志显示所有videoId均有效：

LOG  step_up
LOG  step_up
LOG  bear_crawl
LOG  bear_crawl
LOG  jumping_jacks
LOG  jump_rope
LOG  hand_to_knees
LOG  side_to_side
LOG  chair_elevation
LOG  floor_to_stand
LOG  hand_to_knees
LOG  chair_elevation
LOG  squat
LOG  leg_lifts
LOG  rolling
LOG  toe_touches
LOG  toe_walking
LOG  step_up
LOG  step_up
LOG  step_up
LOG  step_up
LOG  step_up

但每次打印comments时，对象内全是空数组；最终每个数组却恰好只有1条评论，不清楚其中原因。

核心问题 #

• 闭包捕获旧状态：useEffect执行时，comments变量捕获的是组件初始渲染时的空数组状态。循环中每次调用setComments，即便用了函数式更新，但newObj始终基于初始的空状态创建，导致每次循环都只是在空数组里添加当前comment，最终每个数组只会保留最后一次添加的那条数据。
• 多次触发状态更新：循环内每次迭代都调用setComments，会触发多次组件更新，且因为状态依赖旧值，后续更新会覆盖之前的操作。

修复代码 #

方案一：一次性构建完整状态后更新 #

先遍历所有评论完成分类，再调用一次setComments：

useEffect(() => {
  // 复制初始状态结构，避免直接修改原状态
  const newComments = { ...comments };
  const allComments = selectedClient.plan.comments;

  allComments.forEach(comment => {
    const tag = comment.videoId;
    if (newComments[tag]) {
      newComments[tag].push(comment);
    }
  });

  // 一次性更新状态
  setComments(newComments);
  setLoading(false);
}, [selectedClient]);

方案二：使用函数式更新确保基于最新状态 #

利用函数式更新的prevComments参数获取最新状态，避免闭包问题：

useEffect(() => {
  setComments(prevComments => {
    const newComments = { ...prevComments };
    selectedClient.plan.comments.forEach(comment => {
      const tag = comment.videoId;
      if (newComments[tag]) {
        // 创建新数组添加元素，保持不可变性
        newComments[tag] = [...newComments[tag], comment];
      }
    });
    return newComments;
  });
  setLoading(false);
}, [selectedClient]);

说明 #

• 方案一通过预先复制状态结构，一次性完成所有分类操作后再更新状态，避免了多次更新和闭包导致的旧状态问题。
• 方案二使用函数式更新，确保每次状态更新都基于最新的prevComments，更严谨地保证状态更新的准确性。

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