useEffect Hook Endlosschleife

Question

Ich bin neu zu reagieren. Hier ist mein 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;

Dieser Verwendungseffekt ruft also eine Funktion auf

get_single_user_data (userId)

und es sollte ein Array von URLs aus der Datenbank zurückgeben. Aber es gab dies zurück

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

Dies ist die Funktion

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

Hier wird die Benutzer-ID durch den Körper geleitet. Wenn ich jetzt im Backend den Wert von req.body drucke , gibt es die Benutzereigenschaft mit einer leeren Zeichenfolge.

{ Nutzer: "" }

Ich habe es versucht, ohne useEffect zu verwenden, aber dann geht es in eine Endlosschleife.

Answer 1

Da Sie ein leeres Abhängigkeitsarray auf Ihrem haben useEffect, wird es nur einmal ausgelöst. Es sieht so aus, als wäre die userIdZeichenfolge beim Ausführen leer.

Sie möchten Ihrer hitFunktion eine Logik hinzufügen , um die Anforderung nur dann zu stellen, wenn sie userIdnicht leer ist. Darüber hinaus sollten Sie userIddem Abhängigkeitsarray ( [userId]) hinzufügen, damit Ihr Effekt bei Bedarf ausgeführt wird .

Wenn Sie userIdnur diese Funktion benötigen, können Sie stattdessen das Token verwenden und das userIdin Ihrer hitFunktion analysieren .

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