时间戳

首页 > 解决方案 > 无法将 response.data 放入我的 React.js 状态？（express.js）

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

问题描述

    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 被写入控制台，但用户状态为空。有人能告诉我这是为什么吗？

标签： reactjsexpressreact-hooksreact-state

解决方案

两个建议：

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

下面是一个如何测试数据是否存在的示例，这里是一个实时沙盒。

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

在 render 方法中，我们使用三元组来检查数据是否存在。

您的解决方案可能略有不同，因为您将默认值设置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>
  );
}

推荐阅读