React Hook useMemo缺少依赖项

Question

如何处理此警告?(React Hook useMemo缺少依赖项:'deleteTutorial'和' openttutorial '。包括他们或移除依赖数组react-hooks/exhaustive-deps)如果我把opentutual和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/精疲力竭-deps

所以我想知道是否可以把道具。历史依赖:

const openTutorial = useCallback((rowIndex) => {
const id = tutorialsRef.current[rowIndex].id;
props.history.push("/tutorials/" + id);
}, [props.history]);

@版主:对不起，我不知道如何在评论中放代码，所以我回答了我的问题，但我认为这真的是回答我的问题:)