React中useEffect结合扩展运算符设置State异常求助

问题场景 #

在React + GraphQL项目中，通过const [additionalInfo, setAdditionalInfo] = useState({})维护状态，需要将后端返回的lifeStyle对象中带!标记的字段处理后存入状态（去除!），两次实现均出现异常：

• 直接使用当前状态更新时，最终仅保留最后一个符合条件的字段
• 改用函数式更新后，出现意外的undefined字段

问题原因分析 #

1. 第一段代码的问题 #

useEffect(()=> {
   for (var item in  meDataData?.lifeStyle) {
     if ( meDataData?.lifeStyle[item]?.includes('!')) {
       setAdditionalInfo({
           ...additionalInfo,
           [item]: meDataData?.lifeStyle[item]?.substring(0, meDataData?.lifeStyle[item]?.length - 1)
       })
     }
   }
}, [meDataData?.lifeStyle])

• var的变量提升问题：var声明的item是函数作用域变量，循环中所有迭代共享同一个item引用，循环结束后item指向最后一个键（higherEducation），导致前几次更新的字段被覆盖。
• 异步更新的状态依赖问题：setAdditionalInfo是异步操作，循环中多次调用时，每次都基于当前渲染周期的additionalInfo初始值（空对象）进行更新，无法实现累加效果，仅最后一次有效更新生效。

2. 第二段代码的问题 #

useEffect(()=> {
    for (var item in  meDataData?.lifeStyle) {
      if ( meDataData?.lifeStyle[item]?.includes('!')) {
        setAdditionalInfo(prevState =>{
          return ({
            ...prevState,
            [item]: meDataData?.lifeStyle[item]?.substring(0,  meDataData?.lifeStyle[item]?.length - 1)
          })
        })
      }
    }
}, [meDataData?.lifeStyle])

虽然改用函数式更新解决了状态依赖问题，但**var的变量提升问题依然存在**：所有setAdditionalInfo的回调函数共享同一个item引用，当回调执行时，循环已结束，item指向最后一个键higherEducation，导致部分更新逻辑错误，最终出现意外的undefined字段。

解决方法 #

核心思路是避免循环中多次调用setState，批量构建状态对象后一次性更新，同时用块级作用域变量替换var：

方案1：for-in循环批量构建 #

useEffect(() => {
  if (!meDataData?.lifeStyle) return;

  const newAdditionalInfo = {};
  // 使用const声明item，形成块级作用域
  for (const item in meDataData.lifeStyle) {
    const value = meDataData.lifeStyle[item];
    if (value?.includes('!')) {
      newAdditionalInfo[item] = value.substring(0, value.length - 1);
    }
  }

  setAdditionalInfo(newAdditionalInfo);
}, [meDataData?.lifeStyle]);

方案2：Object.entries + reduce（更简洁） #

useEffect(() => {
  if (!meDataData?.lifeStyle) return;

  const newAdditionalInfo = Object.entries(meDataData.lifeStyle).reduce((acc, [key, value]) => {
    if (value?.includes('!')) {
      acc[key] = value.slice(0, -1);
    }
    return acc;
  }, {});

  setAdditionalInfo(newAdditionalInfo);
}, [meDataData?.lifeStyle]);

优势说明 #

• 同步构建完整的状态对象后一次性更新，彻底避免异步更新和闭包问题
• 代码更简洁，性能更优（减少状态更新次数）
• 用const/let替代var，避免变量提升带来的作用域问题

内容的提问来源于stack exchange，提问作者pelotador.1