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

Posted 2023-02-21

【中文标题】在 useEffect() 钩子中从父级传递的子级调用函数，React

【英文标题】：Calling function in child passed from parent in useEffect() hook, React

【发布时间】：2020-05-11 15:58:51

【问题描述】：

我在父组件中定义了一个更新本地状态并将其传递给子组件的函数。在子组件中，我想在每次 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

【问题讨论】：

你能粘贴子组件的声明吗？即您命名组件的部分

当然！我已经编辑了我的帖子。

谢谢，不清楚 updateWeeklyTestState 是否被正确地从 props 中拉出，但看起来你已经搞定了。

【参考方案1】：

试试这个

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

或者这个

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

【参考方案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])

【参考方案3】：

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

这里，

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

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

Because of missing dependancy linting giving this warning.

【讨论】：

您好，感谢您的评论，不幸的是，将prop添加到依赖列表会导致无限循环，因为子组件上有由父组件控制的表单字段，这会导致父组件重新渲染并且每次都会创建一个新的 updateWeeklyTestState 引用。

@GaB 使用 useCallback 钩子传递 updateWeeklyTestState