无法将fetch返回的数据赋值给React的useState状态

你的代码里并不是errors状态赋值失败，而是React useState的更新是异步批量处理的，调用setErrors后立刻执行console.log(errors)，拿到的还是更新前的旧值。

核心原因 #

React为了性能优化，会将状态更新操作批量延迟执行，不会在调用setErrors后立即修改errors变量。所以同步代码中的console.log(errors)无法捕获到最新状态。

解决步骤 #

1. 确认状态已实际更新
   你已经能打印出terrors（接口返回的错误数据），说明接口数据正常，setErrors(terrors)已经正确触发了状态更新。可以通过在组件中渲染errors来验证：

   {errors.length > 0 && (
     <div className="error-list">
       {errors.map((error, index) => (
         <p key={index}>{error}</p>
       ))}
     </div>
   )}
   

   页面会在状态更新后显示错误信息，证明状态赋值成功。

2. 正确打印最新状态
   要获取errors的最新值，需要用useEffect监听状态变化：

   import { useEffect } from 'react';
   
   // ... 你的组件代码
   
   useEffect(() => {
     // 当errors变化时执行
     console.log('最新errors状态:', errors);
   }, [errors]); // 依赖数组，仅当errors变化时触发
   

3. 修正代码中的冗余操作
   setErrors是同步函数，不需要加await，直接调用即可：

   if (res.status === 422) {
       const terrors = await res.json();
       setErrors(terrors); // 去掉await
       console.log('接口返回的错误数据:', terrors);
   }
   

修正后的完整代码示例 #

import { useState, useEffect } from 'react';

const YourComponent = () => {
  const [errors, setErrors] = useState([]);
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [passwordconf, setPasswordconf] = useState('');

  const submitLogin = async (e) => {
      e.preventDefault()

      let formData = new FormData();
      formData.append('name', name);
      formData.append('email', email);
      formData.append('password', password);
      formData.append('password_confirmation', passwordconf);

      setErrors([])

      const res = await fetch(process.env.NEXT_PUBLIC_API_HOST + '/register', {
          method: 'POST',
          body: formData,
      })

      if (res.status === 422) {
          const terrors = await res.json();
          setErrors(terrors);
          console.log('接口返回错误:', terrors);
      }
  }

  useEffect(() => {
      console.log('最新errors状态:', errors);
  }, [errors]);

  return (
    <form onSubmit={submitLogin}>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="姓名" />
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="邮箱" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="密码" />
      <input type="password" value={passwordconf} onChange={(e) => setPasswordconf(e.target.value)} placeholder="确认密码" />
      <button type="submit">注册</button>

      {/* 渲染错误信息 */}
      {errors.length > 0 && (
        <div className="errors">
          {errors.map((err, idx) => <p key={idx}>{err}</p>)}
        </div>
      )}
    </form>
  );
};

export default YourComponent;

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