useEffect hook ห่วงไม่มีที่สิ้นสุด

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;

ดังนั้นผลการใช้งานนี้จะเรียกใช้ฟังก์ชัน

get_single_user_data (userId)

และควรส่งคืนอาร์เรย์ของ URL จากฐานข้อมูล แต่มันกลับมานี้

{ชนิด: "ObjectId", เส้นทาง: "ผู้ใช้", เหตุผล: {}, 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]);