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 배열을 반환해야합니다. 그러나 그것은 이것을 반환했습니다

{종류 : "ObjectId", 경로 : "user", 이유 : {}, stringValue : "" "", 값 : "", 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있습니다.

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