我正在开发一个带有内置文件管理器的 React 页面。我有一个DocumentTable.js
组件,负责显示当前可用的文件列表,并且它(除其他功能外)具有以下三个相互调用的函数:
const getParamPath = useCallback((path, operation, currentFolderPath, fileName) => {
const paramPath = (
path +
"/?operation=" + operation +
((fileName === undefined) ? "" : ("&fileName=" + currentFolderPath + fileName))
)
return paramPath
},
[]
)
const getAllFiles = useCallback((path, currentFolderPath, fileName) => {
const setData = (fileData) => {
const newFolderPath = fileName === undefined ? currentFolderPath : (currentFolderPath + fileName + "/")
fileDataSetter(fileData)
folderPathSetter(newFolderPath)
}
dataGetter(getParamPath(path, "0", currentFolderPath, fileName), setData)
},
[dataGetter, getParamPath, fileDataSetter, folderPathSetter]
)
useEffect(() => {
getAllFiles(path, currentFolderPath)
},
[getAllFiles, path]
)
它首先使用和从父组件继承的变量useEffect()
进行加载。它是调用 的函数之一,该函数向后端 API 发送请求,以获取起始文件夹中可用的文档列表。它使用同样从父组件(、、)继承的各种函数来完成此操作,并且还调用三个函数中的最后一个,即使用查询参数为后端 API 构建路径字符串的函数。它不仅在需要时具有 ,而且还具有一个变量,该变量将告诉后端需要做什么(0 - 显示所有内容,1 - 下载文件,2 - 重命名文件,3 - 删除文件等)。path
currentFolderPath
getAllFiles()
dataGetter
fileDataSetter
folderPathSetter
getParamPath()
fileName
operation
如果用户点击一个文件,该文件就会下载到他们的电脑上。但是,如果他们点击一个文件夹,该currentFolderPath
变量(最初为空字符串)就会更新为包含fileName
和/
smybol,然后由于 useEffect 的作用,页面会重新渲染该文件夹中的文件列表。
但所有这些对于我的问题来说并不是非常重要,因为编译器由于 useEffect 依赖关系不断抛出警告,即:
React Hook useEffect 缺少依赖项“currentFolderPath”。请添加它或移除依赖项数组 react-hooks/exhaustive-deps。
然而问题是,如果没有这个警告,程序现在就可以按预期完美运行,而如果我删除依赖数组,显然 useEffect 会在我打开页面时被无限调用,而另一方面,如果我将其包含currentFolderPath
在数组中,useEffect 会在起始文件夹中不断重新渲染,最终导致越来越多的后端错误。
我的问题是,如何在不影响程序功能的情况下清除这个警告?这是我收到的第一个警告,如果我想要一个可以正常运行的程序,它似乎应该永远被忽略。我是不是做错了什么?
所有警告都由 Lint 检查配置。您只需找到导致警告的 Lint 规则并将其禁用即可。也可以根据范围禁用:针对整个项目、整个文件或下一行。
根据您的情况添加:
喜欢: