useEffect 鈎子無限循環

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;

所以這個useEffect會調用一個函數

get_single_user_data(userId)

它應該從數據庫中返回一個 url 數組。 但它返回了這個

{kind: "ObjectId", path: "user", reason: {}, stringValue: """", value: "", proto : Object}

這是功能

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的值時，它為用戶屬性提供一個空字符串。

{用戶：“”}

我在不使用 useEffect 的情況下嘗試過它，但隨后它進入了無限循環。

Answer 1

由於您的useEffect上有一個空的依賴數組，它只會觸發一次。 運行時看起來userId是一個空字符串。

您需要在您的hit函數中添加一些邏輯，以便僅在userId不為空時發出請求。 此外，為了讓您的效果在需要時運行，您應該將userId添加到依賴項數組 ( [userId] )。

如果userId函數之外的任何地方都不需要userId ，您可以改用令牌，並在您的hit函數中解析userId 。

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