无法在useEffect（）内从AXIOS获取数据

Question

我正在React中的useEffect()内尝试从axios获取数据。我测试了后端，它工作正常，但在前端，我得到了一个错误401(未经授权)

反应代码：

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]);

...  
}

后端代码:

服务器.js

app.use("/items", 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

当您使用钩子设置它时，您不会直接访问use效果方法中的数据。

例：

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

您可以添加一个依赖项，并在< code>title值更改时检查它

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

编辑答案

如果API抛出401，则表示未经授权。您需要在API调用中传递身份验证令牌，以验证来自后端端的API请求。

在这里，您可以检查如何在API调用中传递令牌。使用axios发送承载令牌