无法在 useEffect() 中从 AXIOS 获取数据

Question

我正在尝试从 React 中的 useEffect() 中的 axios 获取数据。我测试了后端它工作正常，但在前端我收到错误 401 (Unauthorized)

反应代码：

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

function UpdateItem({ match, history }) {
  const [title, setTitle] = useState();
  const [description, setDescription] = useState();

...

useEffect(() => {
    const fetching = async () => {
      console.log("I'm there !!!");    //OUTPUT: I'm there !!!

      const { data } = await axios.get(`/items/${match.params.id}`);

      console.log("data from useEffect: ", data);     //OUTPUT: 

      setTitle(data.title);
      setDescription(data.description);
      };

    fetching();

    console.log("Title: ", title);                //OUTPUT: Title: undefined
    console.log("Description: ", description);    //OUTPUT: Description:  undefined
    console.log("I'm here !!!");                  //OUTPUT: I'm here !!!
  }, [match.params.id]);

...  
}

后端代码：

server.js

app.use("/items", itemRoutes);

itemRoutes.js

const asyncHandler = require("express-async-handler");

router.route("/:id").get(
   asyncHandler(async (req, res) => {
     const wantedItem = await Item.findById(req.params.id);
     if (wantedItem) {
       res.json(wantedItem);
     } else {
       res.status(404).json({ message: "Requested item is not found!" });
     }

     res.json(wantedItem);
   });
)

以及我遇到的错误：

 GET http://localhost:3000/items/614dbaea5338fa8622d8e3df 401 (Unauthorized)

如果有人能帮我找出错误我会很高兴

Answer 1

使用钩子设置时，您不会直接访问useEffect方法中的数据。

示例：

  useEffect(() => {
      setTitle("This is title");
      console.log("Title: ", title);                //OUTPUT: Title: undefined
  }, [match.params.id]);

你可以添加一个依赖，当title值改变时检查它

  useEffect(() => {
      console.log("Title: ", title);                //OUTPUT: This is title
  }, [title]);

编辑答案

如果 API 抛出 401 意味着 Unauthorized。您需要在 API 调用中传递 authentication token 以验证来自 backend 方的 API 请求。

在这里您可以查看如何在 API 调用中传递 token。 Sending the bearer token with axios

无法在 useEffect() 中从 AXIOS 获取数据

Not able to get data from AXIOS inside useEffect()

javascript

get

reactjs

axios

react-hooks