反应错误：警告超出最大更新深度

Question

我添加了一个屏幕，管理员可以从中添加产品到商店。每当我尝试进入此页面时，我都会收到以下警告，并且它会不断重复，直到我的浏览器死机或崩溃：

<块引用>

已超出最大更新深度。当组件调用时可能会发生这种情况 setState 在 useEffect 中，但 useEffect 要么没有 依赖数组，或依赖项之一在每次渲染时发生变化。

这是我的 ProductEditScreen.js

的代码

import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import ErrorMessage from "../../components/ErrorMessage/ErrorMessage";
import Loader from "../../components/Loader/Loader";
import { Link } from "react-router-dom";
import { listProductDetails } from "../../redux/actions/productActions";
import "./ProductEditScreen.scss";

const ProductEditScreen = ({ match, history }) => {
  const productID = match.params.id;
  const [name, setName] = useState("");
  const [price, setPrice] = useState(0);
  const [image, setImage] = useState("");
  const [brand, setBrand] = useState("");
  const [category, setCategory] = useState("");
  const [countInStock, setCountInStock] = useState(0);
  const [description, setDescription] = useState("");

  const dispatch = useDispatch();

  const productDetails = useSelector((state) => state.productDetails);
  const { loading, error, product } = productDetails;

  useEffect(() => {
    if (!product.name || product._id !== productID) {
      dispatch(listProductDetails(productID));
    } else {
      setName(product.name);
      setPrice(product.price);
      setImage(product.Image);
      setBrand(product.brand);
      setCategory(product.category);
      setCountInStock(product.setCountInStock);
      setDescription(product.description);
    }
  }, [dispatch, history, product, productID]);

  const submitHandler = (e) => {
    e.preventDefault();
  };

  return (
    <>
      <div className="userEdit-container">
        {/* {loadingUpdate && <Loader />}
        {errorUpdate && <ErrorMessage>{errorUpdate}</ErrorMessage>} */}
        <div className="userEdit-form">
          <h1>EDIT PRODUCT</h1>
          {error ? (
            <ErrorMessage>{error}</ErrorMessage>
          ) : (
            <form onSubmit={submitHandler}>
              <div className="userEdit-form-items">
                <input
                  className="userEdit-input"
                  type="name"
                  placeholder="name"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                />
                <input
                  className="userEdit-input"
                  type="number"
                  placeholder="Price"
                  value={price}
                  onChange={(e) => setPrice(e.target.value)}
                />
                <input
                  className="userEdit-input"
                  type="text"
                  placeholder="Enter image url"
                  value={image}
                  onChange={(e) => setImage(e.target.value)}
                />
                <input
                  className="userEdit-input"
                  type="text"
                  placeholder="Brand Name"
                  value={brand}
                  onChange={(e) => setBrand(e.target.value)}
                />
                <input
                  className="userEdit-input"
                  type="text"
                  placeholder="Category"
                  value={category}
                  onChange={(e) => setCategory(e.target.value)}
                />
                <input
                  className="userEdit-input"
                  type="number"
                  placeholder="Count In Stock"
                  value={countInStock}
                  onChange={(e) => setCountInStock(e.target.value)}
                />
                <input
                  className="userEdit-input"
                  type="text"
                  placeholder="Description"
                  value={description}
                  onChange={(e) => setDescription(e.target.value)}
                />

                <button type="submit" value="submit">
                  UPDATE
                </button>
                <Link to="/admin/productlist">
                  <button>Go Back</button>
                </Link>
              </div>
            </form>
          )}
        </div>
      </div>
    </>
  );
};

export default ProductEditScreen;

警告说 useEffect either doesn't have a dependency array 但我已经通过了所有依赖项。此外，我没有看到任何依赖项在每次渲染时发生变化。

Answer 1

正如 Chris G 在上面的评论中所建议的，我首先用空的 useEffect 运行 []，然后添加了控制台推荐我的内容。

useEffect(() => {
    if (!product.name || product._id !== productID) {
      dispatch(listProductDetails(productID));
    } else {
      setName(product.name);
      setPrice(product.price);
      setImage(product.Image);
      setBrand(product.brand);
      setCategory(product.category);
      setCountInStock(product.setCountInStock);
      setDescription(product.description);
    }
  }, [
    dispatch,
    productID,
    product.Image,
    product._id,
    product.brand,
    product.name,
    product.price,
    product.category,
    product.setCountInStock,
    product.description,
  ]);