useEffect 具有无限调用的依赖项

Question

在从列表中添加/删除项目后，我有一个警报，我想在超时 function 中隐藏。

而不是清理超时 function，useEffect 结束在一个循环中。

function App() {
  const [item, setItem] = useState({
    id: "",
    name: "",
  });
  const [list, setList] = useState([]);
  const [isEditing, setISEditing] = useState(false);
  const [alert, setAlert] = useState({
    active: false,
    type: "",
  });

  const addToList = (e) => {
    e.preventDefault();
    setAlert({ active: true, type: "success" });
    let newItem = { id: new Date().getTime().toString(), name: item };
    e.preventDefault();
    setList([...list, newItem]);
  };

  const removeFromList = (id) => {
    setAlert({ active: true, type: "danger" });
    setList(list.filter((item) => item.id !== id));
  };

  useEffect(() => {
   const timeout = setTimeout(() => {
      setAlert({ active: false, type: "" });
    }, 3000);
    return () => clearTimeout(timeout);
  }, [alert.active]);

Answer 1

使用alert.active依赖项，您将在每次alert.active更改时重新触发useEffect 。 在useEffect中，您正在为alert.active设置一个新值，因此创建了一个无限循环。

您应该直接在 addToList 末尾调用超时或从列表 function 中删除。 如果需要，可以将其隔离在单独的 function

const cancelTimeout = () => {
   setTimeout(() => setAlert({ active: false, type: "" }), 3000)
}

并在AddToList和removeFromList结束时调用cancelTimeout