Question

每当useSelector更改其值时，我都尝试更新我的reducer，但是我需要使用spread运算符来保留我的reducer的其余内容。但是我的useEffect发出以下警告：

反应挂钩useEffect缺少依赖项：'formValues'。要么包含它，要么删除依赖项数组react-hooks / exhaustive-deps。

是否有避免这种警告并保持减速机其余状态的方法？

我的代码使用效果代码：

const handleDispatch = useCallback(
    values => {
      dispatch(hrRequestHiringFormChangeValues(values));
    },
    [dispatch]
  );

  useEffect(() => {
    if (cepAddressValues.error !== true) {
      handleDispatch({
        ...formValues,
        state: cepAddressValues.state,
        city: cepAddressValues.city,
        neighborhood: cepAddressValues.neighborhood,
        address: cepAddressValues.street,
      });
    } else {
      handleDispatch({
        ...formValues,
        state: '',
        city: '',
        neighborhood: '',
        address: '',
      });
    }
  }, [cepAddressValues, handleDispatch]);

Answer 1

在钩子的依赖关系数组（如useEffect，useCallback，useMemo）中，必须将所有声明的变量置于此钩子外部，并将其用于钩子函数内部。在这种情况下，您可以在useEffect的handleDispatch中使用formValues，但不要将其放在依赖项数组中。

[cepAddressValues, handleDispatch, formValues]

Answer 2

禁用嵌入式react-hooks/exhaustive-deps

(make sure that dependency is not required)

  useEffect(() => {
    if (cepAddressValues.error !== true) {
      handleDispatch({
        ...formValues,
        state: cepAddressValues.state,
        city: cepAddressValues.city,
        neighborhood: cepAddressValues.neighborhood,
        address: cepAddressValues.street,
      });
    } else {
      handleDispatch({
        ...formValues,
        state: '',
        city: '',
        neighborhood: '',
        address: '',
      });
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [cepAddressValues, handleDispatch]);

检查，是否在eslint插件中存在react-hooks插件谢谢

React Hook useEffect缺少依赖项：'formValues'。包括它或删除依赖项数组react-hooks / exhaustive-deps

2 个答案: