React JS：无法将API响应赋值给初始为空对象的err状态

你遇到的问题核心在于：React中useState的状态更新是异步批量执行的。调用setErr(data)后，React不会立刻同步更新err状态，而是将这次更新加入任务队列，等待合适时机批量处理状态变更。因此在setErr之后马上执行console.log(err)，打印的依然是更新前的初始值{}。

解决方案 #

方案1：用useEffect监听状态变化

通过useEffect钩子监听err的变化，当状态真正更新后再执行打印或后续操作：

import { useState, useEffect } from 'react';

const [err, setErr] = useState({});
const host = "http://localhost:9000";

// 监听err状态，更新后执行回调
useEffect(() => {
  console.log(err);
}, [err]); // 仅当err变化时触发

const addNote = async (obj) => {
  const res = await fetch(`${host}/api/notes/addnote`, {
      method : 'POST',
      headers : {'Content-Type': 'application/json', 'auth-token' : 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImFiQGdtYWlsLmNvbSIsImlhdCI6MTY3MTQ0ODMyOH0.sNTvl4L9HFaGPOmuSKpJMu418axsUmgDib-94ked3lQ'},
      body : JSON.stringify(obj)
  });
  const data = await res.json();

  console.log(data);
  setErr(data);
}

方案2：直接在组件渲染阶段查看状态

如果只是需要确认状态是否更新成功，可以在组件的渲染区域直接打印err，这样每次组件重新渲染（状态更新后）都会输出最新值：

// 在组件的JSX中添加
{console.log('当前err状态：', err)}

补充说明 #

React的异步状态更新是为了性能优化，它会合并多次状态更新，只触发一次DOM渲染，避免频繁操作DOM导致性能损耗。

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