添加依赖项时 useEffect 无限循环

Question

我一直在做一个 MERN 堆栈编辑页面，不幸的是，当我将“字段”包含到我的 useEffect 依赖项中时，我运行进入了无限循环，并且在我删除它时工作得很好，但是

React Hook useEffect has a missing dependency: 'fields'. Either include it or remove the dependency array.

当我删除它时显示。

这是我的代码：

 const EditFields = () => {
  const menu = useSelector((state) => state.menu.menu);
  const loading = useSelector((state) => state.loading.isLoading);
  const [fields, setFields] = useState({
    name: "",
    description: "",
    price: "",
 });

  useEffect(() => {
    if (menu) {
      setFields({
        ...fields,
        name: menu.name,
        description: menu.description,
        price: menu.price,
        dishImage: menu.dishImage,
        imgData: menu.dishImage,
      });
    }
  }, [menu,fields]);

  return (
    <>
      {!loading ? (
        <div className="add-menu">
          <p className="head">Add Menu</p>
          <form>
            <div className="add-fields">
              
              <div className="group-field">
                <label>*Menu Name</label>
                <input
                  type="text"
                  className="fileBtn"
                  placeholder="Menu Name"
                  value={fields.name}
                  onChange={(e) =>
                    setFields({ ...fields, name: e.target.value })
                  }
                  required
                />
              </div>
              <div className="group-field">
                <label>*Price</label>
                <input
                  type="number"
                  placeholder="Price"
                  value={fields.price}
                  onChange={(e) =>
                    setFields({ ...fields, price: e.target.value })
                  }
                  required
                />
              </div>
              <div className="group-field">
                <label>*Description</label>
                <textarea
                  cols="30"
                  rows="10"
                  placeholder="Menu Description"
                  value={fields.description}
                  onChange={(e) =>
                    setFields({ ...fields, description: e.target.value })
                  }
                  required
                ></textarea>
                <input type="submit" value="submit" />
              </div>
            </div>
          </form>
        </div>
      ) : (
        <h1>Loading...</h1>
      )}
    </>

Answer 1

在您的情况下，每次 fields 更改时都会调用 useEffect，但在 useEffect 中您更改了 fields，因此我们得到一个无限循环。您可以将函数传递给 setState，其第一个参数将是当前状态值。

useEffect(() => {
    if (menu) {
        setFields(prevFields => ({
            ...prevFields,
            name: menu.name,
            description: menu.description,
            price: menu.price,
            dishImage: menu.dishImage,
            imgData: menu.dishImage,
        }));
    }
}, [menu]);

添加依赖项时 useEffect 无限循环

useEffect infinite loops when added a Dependency

reactjs

redux

mern