如何修復 React 警告 React Hook useEffect 缺少依賴項...？

Question

我有兩個警告反應消息。 首先是：

React Hook useCallback 缺少依賴項：“deleteMultipleUsers”和“selectedUsers.length”。 包括它們或刪除依賴數組

  const onSubmit = useCallback(
  (values) =>
  new Promise((resolve, reject) => {
    switch (type) {
      case "addNew": 
         // code

      case "remove": 
        if (selectedUsers?.length > 0) {
          deleteMultipleUsers(resolve);
        }

        dispatch(deleteUser(values, setFilter, resolve, reject));
        resolve();
        break;
      default:
        break;
    }
  })
    .then(() => {
      closeModal(""); 
      );
    })
    .catch((e) => {
      throw new SubmissionError(e);
    }),
[dispatch, type, closeModal, setFilter, intl]
  );


  const deleteMultipleUsers = (resolve) => {
    const removedUsers = users.filter((user) =>
      selectedUsers.includes(user.uuid)
    ); 

    dispatch(deleteUsers(removedUsers, setFilter, resolve));
  };

第二個錯誤信息是：

React Hook useEffect 缺少依賴項：“setSelectedOrganisation”和“value”。 要么包含它們，要么刪除依賴數組 react-hooks/exhaustive-deps

代碼是：

  const setSelectedOrganisation = (value) => {
    let filteredValue = value.map((organisationUnit) => ({
      ...organisationUnit,
      label: organisationUnit.title,
      value: organisationUnit.title
    }));

    setSelect(filteredValue);
    input.onChange(filteredValue);
  };

  useEffect(() => {
    setSelectedOrganisation(value);
  }, []);


  const handleChange = useCallback(
    (value) => {
      setSelectedOrganisation(value);
      input.onChange(value);
      setShowModal(false);
    },
    [input]
  );

我會注意到代碼有效。 但有警告。

我可以使用以下命令從控制台中刪除這些警告：

 eslint-disable-next-line

但是想用代碼解決，讓我的代碼像現在這樣工作

Answer 1

依賴項是您的效果或回調所依賴的變量和函數。 如果其中之一發生更改，您的效果將重新運行。 這是為了防止您的效果和功能引用過時的日期。

有關更多信息，請閱讀有關依賴項的說明： https://reactjs.org/docs/hooks-effect.html

對於第一部分，您需要在依賴項中添加您的 deleteMultipleUsers function 和您的 selectedUsers 變量（在括號內作為您的 useCallback 掛鈎的第二個參數）。 您還需要為您的 deleteMultipleUsers function 使用回調，否則每次渲染后將創建一個新的 function。 對您來說也是如此 onSubmit function 因為它現在是一個依賴項。

const onSubmit = useCallback(
  (values) =>
  new Promise((resolve, reject) => {
    switch (type) {
      case "addNew": 
         // code

      case "remove": 
        if (selectedUsers?.length > 0) {
          deleteMultipleUsers(resolve);
        }

        dispatch(deleteUser(values, setFilter, resolve, reject));
        resolve();
        break;
      default:
        break;
    }
  })
    .then(() => {
      closeModal(""); 
      );
    })
    .catch((e) => {
      throw new SubmissionError(e);
    }),
[dispatch, type, closeModal, setFilter, intl, deleteMultipleUsers, selectedUsers]
  );



const deleteMultipleUsers = useCallback((resolve) => {
  const removedUsers = users.filter((user) =>
    selectedUsers.includes(user.uuid)
  ); 

  dispatch(deleteUsers(removedUsers, setFilter, resolve));
},[dispatch, deleteUsers, resolve, users, setFilter ]);

對於使用效果：

/* handleSelectedOrganisation or selectedOrganisationHandler 
would be a more appropriate name because 
with setSelectOrganisation was created with the useState hook 
and will directly change the state. */

const setSelectedOrganisation = useCallback((value) => {
  let filteredValue = value.map((organisationUnit) => ({
    ...organisationUnit,
    label: organisationUnit.title,
    value: organisationUnit.title
  }));

  setSelect(filteredValue);
  input.onChange(filteredValue);
},[value, input]);

useEffect(() => {
  setSelectedOrganisation(value);
}, [setSelectedOrganisation]);