錯誤訊息中的“ReactHookuseEffect內部的componentMounted變數將在每次渲染后丟失”是什么意思？-有解無憂

實際上，我試圖在加載男裝、女裝等按鈕后獲取 API 資料，但只顯示“正在加載...”按鈕不顯示。

當我嘗試在 useEffect 中初始化“componentMounted”時，所有錯誤都被洗掉，但按鈕再次不顯示。

import React, { useState, useEffect } from "react";

const Products = () => {
  const [data, setData] = useState([]);
  const [filter, setFilter] = useState(data);
  const [loading, setLoading] = useState(false);
  let componentMounted = true;

  useEffect(() => {
    const getProducts = async () => {
      setLoading(true);
      const response = await fetch("https://fakestoreapi.com/products");
      if(componentMounted) {
        setData(await response.clone().json());
        setFilter(await response.json());
        setLoading(false);
        console.log(filter);
      }
      return () => {
        componentMounted = false;
      }

    }

    getProducts();
  });

  const Loading = () => {
    return (<>Loading...</>);
  };

  const ShowProducts = () => {
    return (
      <>
        <div className="button">
          <button className="btn btn-outline-dark me-2">All</button>
          <button className="btn btn-outline-dark me-2">Men's Clothing</button>
          <button className="btn btn-outline-dark me-2">Women's Clothing</button>
          <button className="btn btn-outline-dark me-2">Jewelery</button>
          <button className="btn btn-outline-dark me-2">Electronics</button>
        </div>
      </>
    );
  };

  return (
    <>
      <div className="container my-5">
        <div className="row">
          <div className="col-12">
            <h1 className="display-6 fw-bolder text-center">Latest Products</h1>
            <hr />
          </div>
        </div>
        <div className="row justify-content-center">
          {loading ? <Loading /> : <ShowProducts />}
        </div>
      </div>
    </>
  );
};

export default Products;

錯誤資訊是：

“從 React Hook useEffect 內部對 'componentMounted' 變數的分配將在每次渲染后丟失。要隨著時間的推移保留該值，請將其存盤在 useRef Hook 中并將可變值保留在 '.current' 屬性中。否則，您可以將此變數直接移動到 useEffect 中”

uj5u.com熱心網友回復：

這是因為您忘記添加應該為空的依賴項陣列以加載一次，并且您可以洗掉不需要的 componentMounted，您的 useEffect 將是這樣的：

useEffect(() => {
  const getProducts = async () => {
    setLoading(true);
    const response = await fetch("https://fakestoreapi.com/products");
    setData(await response.clone().json());
    setFilter(await response.json());
    setLoading(false);
    console.log(filter);
  };

  getProducts();
}, []);

uj5u.com熱心網友回復：

它不起作用，因為沒有提供依賴陣列。如果未提供依賴陣列，則您的組件將在無限回圈中重新渲染。其次，為了使用卸載功能，您必須使用 useEffect 的回傳功能。

您可以在此處找到固定示例。

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/514815.html

標籤：反应api反应钩子

下一篇：從特定頁面隱藏按鈕