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”。 包括它們或刪除依賴項數組。 如果'triggerChange'更改過於頻繁，請找到定義它的父組件並將該定義包裝在useCallback中。 （反應鈎/詳盡-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]);

編輯

基於操作碼和框

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