无法将 response.data 放入我的 React.js 状态？（express.js）答案

【问题标题】：Cant put response.data into my React.js state?(express.js)无法将 response.data 放入我的 React.js 状态？（express.js）
【发布时间】：2021-04-20 15:36:06
【问题描述】：

    export default function Main({ match }) {
  const userid = match.params.id;
  const [user, setUser] = useState([]);
  async function fetchuser() {
    const response = await api.get('/emps/profile', {
      headers: {
        userid: match.params.id,
      },
    });
    setUser(response.data);
    console.log(response.data);
    console.log(user);
}
 useEffect(() => {
    
    fetchuser();
  }, [match.params.id]);

在上面的代码中，response.data 被写入控制台，但用户状态为空。谁能告诉我这是为什么？

【问题讨论】：

这可能是由于useState 的异步特性。您的状态不会立即设置。

标签： reactjs express react-hooks react-state

【解决方案1】：

两个建议：

在记录之前确定response 是否包含任何数据。
将您的fetchData 函数移动到useEffect 挂钩中。 https://stackoverflow.com/a/56851963/8943092

以下是如何测试数据是否存在的示例，这里是live Sandbox。

请注意，我们使用一个简单的条件来检查if (myData) 是否为真。我们的 useState 钩子没有设置默认值，所以一旦数据存在，条件返回true。

在render方法中，我们use a ternary来检查数据是否存在。

您的解决方案可能会略有不同，因为您将user 的默认值设置为一个空数组[]。假设您的 API 调用返回一个数组，您将使用 if (user.length > 0) 测试数据。

import React, { useEffect, useState } from "react";

export default function App() {
  const [myData, setMyData] = useState();

  useEffect(() => {
    function fetchData() {
      setTimeout(function () {
        setMyData("I am user data");
      }, 3000);
    }

    if (myData) {
      console.log(myData);
    } else {
      console.log("No data yet");
    }

    fetchData();
  }, [myData]);
  return (
    <div className="App">{myData ? <p>{myData}</p> : <p>No data yet</p>}</div>
  );
}

【讨论】：