useEffect hook loop tak terbatas

Question

Saya baru bereaksi. inilah masalah saya

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;

jadi efek penggunaan ini akan memanggil fungsi

get_single_user_data (userId)

dan harus mengembalikan larik url dari database. Tapi itu mengembalikan ini

{jenis: "ObjectId", path: "user", alasan: {}, stringValue: "" "", value: "", proto : Object}

Inilah fungsinya

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

di sini userId melewati body. Sekarang di backend ketika saya mencetak nilai req.body , ini memberikan properti pengguna dengan string kosong.

{pengguna: ""}

Saya telah mencobanya tanpa menggunakan useEffect tetapi kemudian beralih ke loop tak terbatas.

Answer 1

Karena Anda memiliki larik dependensi kosong useEffect, itu hanya akan diaktifkan sekali. Sepertinya userIdstring kosong saat dijalankan.

Anda akan ingin menambahkan beberapa logika dalam hitfungsi Anda untuk hanya membuat permintaan jika userIdtidak kosong. Selain itu, agar efek Anda berjalan saat diperlukan, Anda harus menambahkan userIdke dependency array ( [userId]).

Jika userIdtidak diperlukan di mana pun selain fungsi ini, Anda dapat menggunakan token sebagai gantinya, dan mengurai userIddalam hitfungsi Anda .

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