useEffect 对依赖项抛出警告

Question

我有一个具有受控状态的下拉菜单。如果用户更改了下拉值并且输入不为空，则触发从其他组件传递的函数。

export default ({ triggerChange, inputVal }) => {
  const [dropdown, setDropdown] = useState(1);

  useEffect(() => {
    if (inputVal) {
      triggerChange(dropdown);
    }
  }, [dropdown]); // this line throw a warning

  const handleChange = e => {
    setDropdown(e.target.value);
  };

  return (
    <div>
      <select onChange={handleChange}>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </div>
  );
};

codesandbox

错误

React Hook useEffect 缺少依赖项：'inputVal' 和 '触发改变'。要么包含它们，要么删除依赖数组。 如果 'triggerChange' 变化太频繁，请找到 定义它并将该定义包装在 useCallback 中。 (react-hooks/exhaustive-deps)

Answer 1

将这些添加到依赖项中：

useEffect(() => {
  if (inputVal) {
    triggerChange(dropdown);
  }
}, [dropdown, inputVal]);

这只会在 dropdown 或 inputVal 值发生变化时重新运行效果。

对于triggerChange：

如果dropdown频繁变化，使用useCallback钩子。

// Parent.js
const memoizedTriggerChange = useCallback(
  () => {
    triggerChange(dropdown);
  },
  [dropdown],
);

useEffect(() => {
  if (inputVal) {
    memoizedTriggerChange();
  }
}, [inputVal]);

编辑

基于 OPs 代码框

// index.js
const triggerChange = useCallback(() => {
  console.log("call api");
}, []); // not depending on inputVal to prevent firing if inputVal changes

// AnotherComp.js
useEffect(() => {
  triggerChange(dropdown);
}, [dropdown, triggerChange]);

Answer 2

useEffect(() => {
    if (inputVal) {
      triggerChange(dropdown);
    }
  }, [dropdown]); // this line throw a warning

如果您注意到，在这段代码中，inputVal、triggerChange 和 dropdown 是变量，它们是 useEffect 挂钩的依赖项，因为只要对上述任何依赖项进行任何更改，都会触发 useEffect。

为了满足 useEffect hook 的基本工作原理，我们应该在 useEffect 的数组参数中传递这些依赖关系。

  useEffect(() => {
    if (inputVal) {
      triggerChange(dropdown);
    }
  }, [dropdown, triggerChange, inputVal]);