React useEffect中更新state时出现comma expected报错如何解决

错误根因 #

• 该语法报错是因为JS对象字面量要求所有属性必须遵循键名: 对应值的结构，你在扩展sample.data后直接书写res.data，没有指定该值对应的属性名，也没有加扩展运算符展开res.data的内部属性，JS引擎解析时误以为你要定义新的属性名，读到.字符时判定语法非法，因此抛出"," expected的错误。

修复方式 #

根据你的业务需求二选一即可：

方式1：合并res.data的所有属性到data中 #

如果你是想把res.data里的所有属性平铺合并到sample.data里，给res.data加上扩展运算符...即可，同时建议修改state更新写法为函数式更新，避免闭包导致的状态更新异常，另外函数内的console.log不需要额外包裹大括号（仅JSX内嵌入JS表达式需要用大括号），修复后完整代码如下：

useEffect(()=>{
     axios.get('http://localhost:1234/hello').then((res)=>{
          console.log(res.data)
          setSample(prevSample => ({
            ...prevSample,
            data: {...prevSample.data, ...res.data}
          }))
     })
  }, [])

方式2：将res.data作为整体赋值给指定键 #

如果你是想把整个res.data作为值，存到sample.data的某个属性下，明确指定键名即可：

// 示例中将键名设为resData，可根据你的业务需求修改为对应键名
data: {...sample.data, resData: res.data}

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