在 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.