React中useState无法更新数据的问题求助

你遇到的问题核心是useState的更新是异步操作，再加上JavaScript闭包特性，导致当前代码里打印的始终是初始状态的data。

问题原因拆解 #

1. useState更新的异步性：调用setData(json)后，React不会立刻修改data的值，而是把状态更新加入队列，等待合适时机重新渲染组件。所以在getData里调用setData后立刻打印data，拿到的还是更新前的旧值。
2. 闭包捕获的旧值：你的useEffect依赖是空数组[]，意味着它只会在组件首次渲染时执行一次。这个回调函数捕获了当时的data（也就是你定义的initialNote），哪怕后续data被更新，这个闭包里的data也不会改变。

验证并解决的方法 #

1. 正确查看更新后的状态

添加一个监听data变化的useEffect，当data状态更新时，这个钩子会自动执行，打印出最新的值：

// 在现有代码中添加这个useEffect
useEffect(() => {
  console.log("更新后的data:", data);
}, [data]); // 依赖数组里加入data，监听其变化

2. 优化初始状态的定义

把initialNote移到组件外部，避免每次组件渲染都重新创建这个对象（虽当前场景影响不大，但属于规范写法）：

const initialNote = [
  {
    _id: "",
    user: "",
    title: "",
    description: "",
    tag: "",
    __v: 0,
  },
];

export default function Home() {
  const [data, setData] = useState(initialNote);
  // ... 其他代码
}

修改后的完整代码示例 #

import React, { useState, useEffect } from 'react'

const initialNote = [
  {
    _id: "",
    user: "",
    title: "",
    description: "",
    tag: "",
    __v: 0,
  },
];

export default function Home() {
  const [data, setData] = useState(initialNote);
  const host = "http://localhost:5000/";
  
  const getData = async () => {
    const response = await fetch(`${host}notes/fetch`, {
      method: "GET",
      mode: "cors",
      headers: {
        "Content-Type": "application/json",
        // "auth-token": localStorage.getItem("token"),
      },
    });
    const json = await response.json();
    setData(json); // setData是同步函数，无需await
  };

  useEffect(() => {
    getData();
  }, [])

  // 监听data变化，打印最新值
  useEffect(() => {
    console.log("更新后的data:", data);
  }, [data])

  return (
    <>
      <div className="container">
        <form className="m-3">
          <div className="mb-3">
            <label htmlFor="exampleInputEmail1" className="form-label">
              Email address
            </label>
            <input
              type="email"
              className="form-control"
              id="exampleInputEmail1"
              aria-describedby="emailHelp"
            />
            <div id="emailHelp" className="form-text">
              We'll never share your email with anyone else.
            </div>
          </div>
          <div className="mb-3">
            <label htmlFor="exampleInputPassword1" className="form-label">
              Password
            </label>
            <input
              type="password"
              className="form-control"
              id="exampleInputPassword1"
            />
          </div>

          <button type="submit" className="btn btn-primary">
            Submit
          </button>
        </form>
      </div>
    </>
  );
}

补充：setData本身是同步函数，不需要用await修饰，去掉await不影响状态更新逻辑。

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