React使用setState更新state报错：类型转换表达式需用括号包裹

错误原因 #

你当前的语法错误来源于对象类型state的更新写法不规范：更新对象类型的React state时，需要传入完整的新对象，你将展开运算符...userLogin和属性user_email: 'test@mail.com'直接作为setUserLogin的多个参数传入，没有包裹在花括号内部，JS引擎无法识别为对象表达式，就会抛出“类型转换表达式需要被括号包裹”的错误。

修复方案 #

1. 修正state更新语法 #

将原setUserLogin调用部分的代码改为以下写法，给对象内容套上一层花括号即可解决语法报错：

setUserLogin({
  ...userLogin,
  user_email: 'test@mail.com'
})

后续要替换为ref绑定的输入值，直接修改对应赋值即可：

setUserLogin({
  ...userLogin,
  user_email: refConnexionMail.current.value
})

2. 修复异步更新导致的参数错误 #

React的state更新是异步操作，调用setUserLogin之后立刻读取userLogin拿到的还是更新前的旧值，会导致你后续POST请求的参数错误。建议先把更新后的值存入临时变量，同时用于更新state和接口请求，修改后的完整login函数参考如下：

const login = async (e) => {
  e.preventDefault();
  const newEmail = refConnexionMail.current.value;
  // 构造新的state对象
  const newUserLogin = {
    ...userLogin,
    user_email: newEmail
  };
  // 更新state
  setUserLogin(newUserLogin);
  // 直接用新对象发请求，避免异步问题
  await POST(ENDPOINTS.USER_LOGIN, newUserLogin);
  
  fetch("http://localhost:4200/api/auth/login")
    .then((response) => response.json())
    .then((data) => {
      console.log(data);
    });
}; 

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