在 useEffect() 钩子中从父级传递的子项中的调用函数，React

Question

>我在父组件中定义了一个函数，该函数更新本地状态并将其传递给子组件。在子组件中，我想在每次 magLockDropdown 依赖项值更改时调用 useEffect 钩子中的函数。尝试执行此操作时，我收到如下所示的 lint 警告。为此示例禁用 linter 是个好主意吗？我知道每次父级重新渲染时，它都会重新创建正在传递的函数，但不确定这是否会导致警告。任何帮助表示赞赏。谢谢！

父组件中的函数。

const updateWeeklyTestState = (name, value) => {
setWeeklyTest({
...weeklyTest, [name]: value
})}

子组件中的使用状态挂钩。

useEffect(() => {
updateWeeklyTestState (failList, maglockDropdown)
}, [maglockDropdown])

esLint 警告：

React Hook useEffect缺少一个依赖项："updateWeeklyTestState"。要么包含它，要么删除依赖数组 react-hooks/exhaustive-deps

编辑

儿童声明

export default function Maglocks (props) {
const [maglockDropdown, setMaglockDropdown] = useState(['Pass'])
const { maglocks, weeklyTestState, updateWeeklyTestState, addFailedMaglocksToArray } = props

Answer 1

试试这个

useEffect(() => {
if(updateWeeklyTestState){
updateWeeklyTestState (failList, maglockDropdown)
}
}, [maglockDropdown])

或者这个

export default function Maglocks (props) {
const { maglocks, weeklyTestState, updateWeeklyTestState, addFailedMaglocksToArray } = props
const [maglockDropdown, setMaglockDropdown] = useState(['Pass'])

Answer 2

到现在为止(您的useEffect中没有任何异步内容(，可以安全地忽略警告。否则，如果setWeeklyTest不是来自useState或useCallback您可能会面临"过时的数据问题"(因此将使用错误/过时的输入数据调用它(。

另一方面，如果你只是把updateWeeklyTestState放到useEffect的依赖关系中，每次父重新渲染时，你都会得到身体运行(这可能违背了你的需要(。

所以我建议也声明updateWeeklyTestState为useCallback这样它在引用上是相同的：

const updateWeeklyTestState = useCallback((name, value) => {
setWeeklyTest({
...weeklyTest, [name]: value
})}, [setWeeklyTest]);

然后作为依赖项添加到useEffect不会破坏您的逻辑：

useEffect(() => {
updateWeeklyTestState (failList, maglockDropdown)
}, [maglockDropdown, updateWeeklyTestState])

Answer 3

正如你所说，它只是linting警告。

这里

useEffect(() => {
updateWeeklyTestState (failList, maglockDropdown)
}, [maglockDropdown])

钩子取决于updateWeeklyTestState.所以，它需要作为依赖列表传递给钩子。

Because of missing dependancy linting giving this warning.