React Hook useMemo 缺少依賴項

Question

如何處理這個警告？ （React Hook useMemo 缺少依賴項：'deleteTutorial' 和 'openTutorial'。要么包含它們，要么刪除依賴項數組 react-hooks/exhaustive-deps）如果我將 openTutorial 和 deleteTutorial 放在 useMemo 鈎子中，則不會出現編譯警告，但隨后我有一個問題，這兩個功能不起作用。

  const openTutorial = (rowIndex) => {
    const id = tutorialsRef.current[rowIndex].id;

    props.history.push("/tutorials/" + id);
  };

  const deleteTutorial = (rowIndex) => {
    const id = tutorialsRef.current[rowIndex].id;

    TutorialDataService.remove(id).then((response) => {
      props.history.push("/tutorials");

      let newTutorials = [...tutorialsRef.current];
      newTutorials.splice(rowIndex, 1);

      setTutorials(newTutorials);
    }).catch((e) => {
      console.log(e);
    });
  };

  const columns = useMemo(() => [
    {
      Header: "Naziv",
      accessor: "title"
    }, {
      Header: "Opis",
      accessor: "description"
    }, {
      Header: "Površina",
      accessor: "povrsina"
    }, {
      Header: "Dužina x Širina",
      accessor: properties => properties.duzina + ' x ' + properties.sirina
    }, {
      Header: "",
      accessor: "actions",
      Cell: (props) => {
        const rowIdx = props.row.id;

        return (<div>
          <span onClick={() => openTutorial(rowIdx)}>
            <i className="far fa-edit action mr-2"></i>
          </span>

          <span onClick={() => (confirmDialog('Da li želite obrisati parcelu?', () => deleteTutorial(rowIdx)))
}>
            <i className="fas fa-trash action"></i>
          </span>

        </div>);
      }
    }
  ], []);

/編輯/ 現在我遇到了 useCallback 缺少依賴 props.history 的問題。 可以這樣修復嗎：

const callHistory = useCallback(() => {
    props.history.push("/tutorials");
  }, [props.history]);

  const deleteTutorial = useCallback((rowIndex) => {
    const id = tutorialsRef.current[rowIndex].id;

    TutorialDataService.remove(id).then((response) => {

      callHistory();
      let newTutorials = [...tutorialsRef.current];
      newTutorials.splice(rowIndex, 1);

      setTutorials(newTutorials);
    }).catch((e) => {
      console.log(e);
    });
  }, [callHistory]);

Answer 1

讓我解釋一下，當我這樣做時：

  const openTutorial = useCallback((rowIndex) => {
    const id = tutorialsRef.current[rowIndex].id;

    props.history.push("/tutorials/" + id);
  }, []);

  const deleteTutorial = useCallback((rowIndex) => {
    const id = tutorialsRef.current[rowIndex].id;

    TutorialDataService.remove(id).then((response) => {
      props.history.push("/tutorials");

      let newTutorials = [...tutorialsRef.current];
      newTutorials.splice(rowIndex, 1);

      setTutorials(newTutorials);
    }).catch((e) => {
      console.log(e);
    });
  }, []);

  const columns = useMemo(() => [
    {
      Header: "Naziv",
      accessor: "title"
    }, {
      Header: "Opis",
      accessor: "description"
    }, {
      Header: "Površina",
      accessor: "povrsina"
    }, {
      Header: "Dužina x Širina",
      accessor: properties => properties.duzina + ' x ' + properties.sirina
    }, {
      Header: "",
      accessor: "actions",
      Cell: (props) => {
        const rowIdx = props.row.id;

        return (<div>
          <span onClick={() => openTutorial(rowIdx)}>
            <i className="far fa-edit action mr-2"></i>
          </span>

          <span onClick={() => (confirmDialog('Da li želite obrisati parcelu?', () => deleteTutorial(rowIdx)))
}>
            <i className="fas fa-trash action"></i>
          </span>

        </div>);
      }
    }
  ], [deleteTutorial, openTutorial]);

我收到此警告： React Hook useCallback 缺少依賴項：'props.history'。 包括它或刪除依賴數組 react-hooks/exhaustive-deps

所以我想知道是否可以將 props.history 放在依賴中：

  const openTutorial = useCallback((rowIndex) => {
    const id = tutorialsRef.current[rowIndex].id;

    props.history.push("/tutorials/" + id);
  }, [props.history]);

@moderator：抱歉，我不知道如何在評論中添加代碼，所以我回答了我的問題，但我認為這確實是對我問題的回答:)