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

Question

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

父组件中的函数。

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

子组件中的 UseState 钩子。

  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.