Question

我是新来的反应者。这是我的问题

import React, { useEffect, useState } from "react";
import { useJwt } from "react-jwt";
import { get_single_user_url } from "../../store/api";
import UrlCard from "../UrlCard/UrlCard";
import "./Urls.css";

function Urls() {
  const [urls, setUrls] = useState([]);
  const { decodedToken } = useJwt(localStorage.token);
  const userId = decodedToken !== null ? decodedToken.userId : "";

  useEffect(() => {
    const hit = async (userId) => {
      get_single_user_url(userId).then((data) => setUrls(data));
      const data = await get_single_user_url(userId);
      setUrls(data);
      console.log(data);
    };
    hit(userId);
  }, []);

  return <div className="urls"></div>;
}

export default Urls;

所以这种使用效果会调用一个函数

get_single_user_data（userId）

，它应该从数据库返回一个URL数组。但是它返回了

{种类：“ ObjectId”，路径：“用户”，原因：{}，字符串值： ””””，值：“”， proto ：对象}

这是功能

export const get_single_user_url = async (userId) => {
  try {
    const response = await axios({
      method: "post",
      url: "http://192.168.43.62:5000/getUrls",
      data: { user: userId },
      headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
    });
    console.log(response.data);
    return response.data;
  } catch (error) {
    console.log(error.message);
  }
};

此处，userId是通过正文传递的。现在在后端中，当我打印 req.body 的值时，它将为 user 属性提供一个空字符串。

{用户：“”}

我没有使用useEffect尝试过它，但是它进入了无限循环。

Answer 1

由于useEffect上的依赖项数组为空，因此只会触发一次。看起来userId在运行时是一个空字符串。

您需要在hit函数中添加一些逻辑，以仅在userId不为空时发出请求。另外，要使效果在需要时运行，应将userId添加到依赖项数组（[userId]）。

如果除此功能以外的任何地方都不需要userId，则可以改用令牌，并在userId函数中解析hit。

const [urls, setUrls] = useState([]);
const { decodedToken } = useJwt(localStorage.token);

useEffect(() => {
  const hit = async (decodedToken) => {
    const userId = decodedToken !== null ? decodedToken.userId : "";
    if (!userId) {
      return;
    }
    
    get_single_user_url(userId).then((data) => setUrls(data));
    const data = await get_single_user_url(userId);
    setUrls(data);
    console.log(data);
  };

  hit(decodedToken);
}, [decodedToken]);

useEffect挂钩无限循环

1 个答案: