useEffect gancho bucle infinito

Question

Soy nuevo en reaccionar. aqui esta mi 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;

entonces este useeffect llamará a una función

get_single_user_data (userId)

y debería devolver una matriz de direcciones URL de la base de datos. Pero devolvió esto

{tipo: "ObjectId", ruta: "usuario", motivo: {}, stringValue: "" "", valor: "", proto : Object}

Esta es la funcion

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

aquí userId se pasa a través del cuerpo. Ahora en el backend, cuando imprimo el valor de req.body , le da la propiedad del usuario con una cadena vacía.

{usuario: ""}

Lo probé sin usar useEffect pero luego entra en un bucle infinito.

Answer 1

Dado que tiene una matriz de dependencia vacía en su useEffect, solo se activará una vez. Parece que userIdes una cadena vacía cuando se ejecuta.

Querrá agregar algo de lógica en su hitfunción para realizar la solicitud solo si userIdno está vacía. Además, para que su efecto se ejecute cuando sea necesario, debe agregarlo userIda la matriz de dependencia ( [userId]).

Si userIdno se necesita en ningún otro lugar que no sea esta función, puede usar el token y analizarlo userIden su hitfunción.

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