無法對 add.fetch() 返回的數據做出反應 useState

Question

這是我的代碼。

const [errors, setErrors] = 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();
        await setErrors(terrors)
        console.log(terrors);
        console.log(errors);
    }
}

即使我將res.json()作為數組獲取，我也無法將它們分配給 useState() 。

這是 console.log 的圖像

Answer 1

useState 是異步的。 使用 useEffect 查看狀態變量的更新

useEffect(() => {       
  console.log(errors);
}, [errors])

另外，避免在 setState 中使用 await

setErrors(terrors)