useEffect hook infinite loop

Question

Jestem nowy, aby zareagować. oto mój problem

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;

więc ten useeffect wywoła funkcję

get_single_user_data (identyfikator użytkownika)

i powinien zwrócić tablicę adresów URL z bazy danych. Ale to zwróciło

{rodzaj: "ObjectId", ścieżka: "użytkownik", przyczyna: {}, stringValue: "" "", wartość: "", proto : Object}

To jest funkcja

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

tutaj userId jest przekazywany przez treść. Teraz w zapleczu, kiedy drukuję wartość req.body , zwraca ona właściwość użytkownika z pustym ciągiem.

{użytkownik: „”}

Wypróbowałem to bez użycia useEffect, ale potem przechodzi w nieskończoną pętlę.

Answer 1

Ponieważ masz pustą tablicę zależności useEffect, zostanie ona uruchomiona tylko raz. Wygląda na userIdto, że jest to pusty ciąg podczas działania.

Będziesz chciał dodać logikę do swojej hitfunkcji, aby żądanie userIdbyło wysyłane tylko wtedy, gdy nie jest puste. Dodatkowo, aby efekt działał w razie potrzeby, należy dodać userIddo tablicy zależności ( [userId]).

Jeśli userIdnie jest potrzebny nigdzie poza tą funkcją, możesz zamiast tego użyć tokenu i przeanalizować userIdw swojej hitfunkcji.

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