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'。包括它们或删除依赖项数组。如果'triggerChange'更改过于频繁，请找到定义它，并将该定义包装在useCallback中。（反应钩/详尽的下降）

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]);

编辑

基于OP的代码和框

// 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钩子的基本工作原理，我们应该在useEffect的array参数中传递这些依赖关系。

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

useEffect引发警告以提高可靠性

2 个答案: