useEffect hook vòng lặp vô hạn

Question

Tôi mới phản ứng. đây là vấn đề của tôi

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;

vì vậy, useeffect này sẽ gọi một hàm

get_single_user_data (userId)

và nó sẽ trả về một mảng url từ cơ sở dữ liệu. Nhưng nó trả lại cái này

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

Đây là chức năng

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

ở đây userId được chuyển qua phần thân. Bây giờ trong phần phụ trợ khi tôi in giá trị của req.body , nó cung cấp thuộc tính người dùng với một chuỗi trống.

{ người dùng: "" }

Tôi đã thử nó mà không sử dụng useEffect nhưng sau đó nó đi vào một vòng lặp vô hạn.

Answer 1

Vì bạn có một mảng phụ thuộc trống useEffect, nó sẽ chỉ kích hoạt một lần. Có vẻ như userIdlà một chuỗi rỗng khi chạy.

Bạn sẽ muốn thêm một số logic trong hithàm của mình để chỉ thực hiện yêu cầu nếu userIdkhông có sản phẩm nào. Ngoài ra, để hiệu ứng của bạn chạy khi cần, bạn nên thêm userIdvào mảng phụ thuộc ( [userId]).

Nếu userIdkhông cần thiết ở bất kỳ nơi nào khác ngoài hàm này, bạn có thể sử dụng mã thông báo để thay thế và phân tích cú pháp userIdtrong hithàm của mình .

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