React JS使用fetch请求用户数据后setUser赋值返回undefined如何解决

• 第一个then的返回值错误：你在第一个then回调里执行了return console.log(response.json())，console.log的返回值是undefined，会导致后续第二个then拿到的responseObject本身就是undefined；且response.json()是异步方法，返回的是Promise对象，直接打印只能看到Promise结构，拿不到实际解析后的响应数据。
• 状态更新是异步行为：React的setUser属于批量异步更新方法，调用setUser后同步打印user，拿到的还是本次渲染周期内的旧状态值，不是更新后的值。
• 状态赋值结构不符合预期：你执行setUser({ ...user, userData })时，是把接口返回的用户数据挂载到了user状态的userData属性下，不是直接把用户字段平铺到user对象里，后续如果直接读取user.firstname这类字段也会拿到undefined。

function Profil() {
  const [user, setUser] = useState({});

  const getUser = () => {
    const headers = new Headers({
      "Content-Type": "application/json",
      "X-Requested-With": "XMLHttpRequest",
      Authorization: "Bearer " + localStorage.getItem("token"),
    });

    const options = {
      method: "GET",
      headers: headers,
    };

    fetch(
      "https://..../user",
      options
    )
      .then((response) => {
        // 解析响应JSON并返回解析后的结果
        return response.json();
      })
      .then(
        (responseObject) => {
          // 直接将接口返回的用户字段赋值给状态
          setUser(responseObject);
        },
        (error) => {
          console.log(error);
        }
      );
  };

  // 监听user变化，可拿到更新后的状态值
  useEffect(() => {
    console.log("更新后的user状态：", user);
  }, [user]);

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

  return (
    <div>
      {/* 用可选链兼容数据未加载完成的场景，避免报错 */}
      <h1> Prénom：{user?.firstname}</h1>
    </div>
  );
}

export default Profil;

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