useEffect hook loop infinito

Question

Sono nuovo a reagire. ecco il mio problema

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;

quindi questo effetto d'uso chiamerà una funzione

get_single_user_data (userId)

e dovrebbe restituire un array di URL dal database. Ma ha restituito questo

{tipo: "ObjectId", percorso: "utente", motivo: {}, stringValue: "" "", valore: "", proto : Object}

Questa è la funzione

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

qui userId viene passato attraverso il corpo. Ora nel backend, quando stampo il valore di req.body , fornisce la proprietà utente con una stringa vuota.

{ utente: "" }

L'ho provato senza usare useEffect ma poi va in un ciclo infinito.

Answer 1

Poiché hai un array di dipendenze vuoto sul tuo useEffect, verrà attivato solo una volta. Sembra che userIdsia una stringa vuota durante l'esecuzione.

Ti consigliamo di aggiungere un po 'di logica nella tua hitfunzione per effettuare la richiesta solo se userIdnon è vuota. Inoltre, per far sì che il tuo effetto venga eseguito quando necessario, dovresti aggiungere userIdall'array delle dipendenze ( [userId]).

Se userIdnon è necessario altrove oltre a questa funzione, potresti invece usare il token e analizzarlo userIdnella tua hitfunzione.

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