时间戳

首页 > 解决方案 > 错误：React Hook useEffect 缺少依赖项：'dispatch'。包括它或删除依赖数组

reactjs - 错误：React Hook useEffect 缺少依赖项：'dispatch'。包括它或删除依赖数组

问题描述

试图调度一个动作，但我的终端出现了这个错误。

错误：React Hook useEffect 缺少依赖项：'dispatch'。包括它或删除依赖数组

但是我的代码不会在屏幕上呈现。

function CartPage(props) {
  const dispatch = useDispatch();
  const [Total, setTotal] = useState(0);
  const [ShowTotal, setShowTotal] = useState(false);
  const [ShowSuccess, setShowSuccess] = useState(false);

  useEffect(() => {
    let cartItems = [];
    if (props.user.userData && props.user.userData.cart) {
      if (props.user.userData.cart.length > 0) {
        props.user.userData.cart.forEach((item) => {
          cartItems.push(item.id);
        });
        dispatch(getCartItems(cartItems, props.user.userData.cart)).then(
          (response) => {
            if (response.payload.length > 0) {
              calculateTotal(response.payload);
            }
          },
        );
      }
    }
  }, [props.user.userData]);
}

标签： reactjsdependenciesdispatch

解决方案

这是一个 linting 规则exhaustive-deps。目的是让您仅使用第二个参数中使用的道具或状态变量。

因为你的第二个参数不包括dispatch你得到一个错误。如果您将调度添加到应该消失的第二个参数。

useEffect(() => {
  // your logic here 
}, [props.user.userData, dispatch])

这样做的缺点是，只要您的userDataordispatch发生变化，您的效果就会运行。您可以使用 忽略此规则// eslint-disable-next-line react-hooks/exhaustive-deps。

推荐阅读