如何修復 React Redux 和 React Hook useEffect 缺少依賴項：'dispatch'

Question

React Hook useEffect 缺少一個依賴項：'dispatch'。 要么包含它，要么移除依賴數組 react-hooks/exhaustive-deps

我在這樣的功能組件上使用來自 React Redux 的useDispatch() Hook：

const Component = () => {
  const dispatch = useDispatch();
  const userName = useSelect(state => state.user.name);

  useEffect(() => {
    dispatch(getUserInformation());
  }, [userId]);

  return (
    <div>Hello {userName}</div>
  );
};

export default Component;

如何在不刪除依賴數組 react-hooks/exhaustive-deps 的情況下刪除此警告，這對於避免其他錯誤很有用。

Answer 1

為了避免該警告，只需將dispatch添加到依賴項數組即可。 這不會調用重新渲染，因為調度值不會改變。

const Component = () => {
  const dispatch = useDispatch();
  const userName = useSelect(state => state.user.name);

  useEffect(() => {
    dispatch(getUserInformation());
  }, [userId, dispatch]);

  return (
    <div>Hello {userName}</div>
  );
};

export default Component;

Answer 2

React Hook useEffect缺少依賴項：“ dispatch”。 要么包含它，要么刪除依賴項數組react-hooks / exhaustive-deps

我在類似這樣的功能組件上使用React Redux的useDispatch() Hook：

const Component = () => {
  const dispatch = useDispatch();
  const userName = useSelect(state => state.user.name);

  useEffect(() => {
    dispatch(getUserInformation());
  }, [userId]);

  return (
    <div>Hello {userName}</div>
  );
};

export default Component;

如何在不刪除依賴關系數組react-hooks / exhaustive-deps的情況下刪除此警告，這對於避免其他錯誤很有用。

Answer 3

React Hook useEffect缺少依賴項：“ dispatch”。 要么包含它，要么刪除依賴項數組react-hooks / exhaustive-deps

我在類似這樣的功能組件上使用React Redux的useDispatch() Hook：

const Component = () => {
  const dispatch = useDispatch();
  const userName = useSelect(state => state.user.name);

  useEffect(() => {
    dispatch(getUserInformation());
  }, [userId]);

  return (
    <div>Hello {userName}</div>
  );
};

export default Component;

如何在不刪除依賴關系數組react-hooks / exhaustive-deps的情況下刪除此警告，這對於避免其他錯誤很有用。

Answer 4

只需將dispatch添加到您的依賴數組或使依賴數組為空。

第一種情況：

const Component = () => {
  const dispatch = useDispatch();
  const userName = useSelect(state => state.user.name);

  useEffect(() => {
    dispatch(getUserInformation());
  }, [userId, dispatch]);

  return (
    <div>Hello {userName}</div>
  );
};

export default Component;

第二種情況：

const Component = () => {
  const dispatch = useDispatch();
  const userName = useSelect(state => state.user.name);

  useEffect(() => {
    dispatch(getUserInformation());
  }, []);

  return (
    <div>Hello {userName}</div>
  );
};

export default Component;

通過添加這些依賴項，您的 useEffect 可能會導致重新渲染或根本不重新渲染。 這完全取決於您的數據和使用它的環境。

無論如何，如果您不希望同時遵循上述兩種方法，那么 //ts-ignore 可以工作，但我不建議這樣做，因為從長遠來看這可能會產生錯誤。