将 useEffect 与从父组件作为道具接收的函数反应

Question

我有一个父组件

import React ,{useState} from 'react'

import ChildComponenet from './child'

export default function App() {
  const [parentValue , setParentValue] = useState(0)


  const someParentfunc = (input1,input2)=>{
    setParentValue( parseInt(input1,10) +parseInt(input2,10))
  }
  return (
    <div className="App">
      Add : {parentValue}
      <ChildComponenet someParentfunc={someParentfunc} />
    </div>
  );
}

现在是子组件：

import React ,{useState,useEffect} from 'react'


function ChildComponenet({someParentfunc}) {
  const [input1 , setInput1] = useState(10)
  const [input2 , setInput2] = useState(20)
  
  useEffect(() => {
    someParentfunc(input1,input2)
  }, [input1,input2])

  return (
        <div>
          <input type="text"
            value={input1}
            onChange={event => setInput1(event.target.value) }
          />
        <input type="text"
            value={input2}
            onChange={event => setInput2(event.target.value) }
          />
       </div>
  )
}

export default ChildComponenet

错误是：React Hook useEffect 缺少依赖项：'someParentfunc'。要么包含它，要么移除依赖数组。

我是否应该在 useEffect 中添加 someParentfunc ，这是正确的方法吗：

useEffect(() => {
    someParentfunc(input1, input2);
  }, [input1, input2,someParentfunc]);

工作项目链接是：https://codesandbox.io/s/competent-kare-kce02?file=/src/child.js

Answer 1

someParentfunc 没有使用闭包中的任何值，因此如果您在依赖项中避免使用它，则应该没有任何问题。但是，为了使您的代码可扩展，您应该尝试遵循这些模式并将其添加到依赖项中，以便如果将来更新该函数不会导致任何问题

要将其添加为依赖项，您应确保使用 useCallback 函数，以便在每次重新渲染时不会重新创建该函数

export default function App() {
  const [parentValue , setParentValue] = useState(0)


  const someParentfunc = useCallback((input1,input2)=>{
    setParentValue( parseInt(input1,10) +parseInt(input2,10))
  }, [setParentValue]);
  return (
    <div className="App">
      Add : {parentValue}
      <ChildComponenet someParentfunc={someParentfunc} />
    </div>
  );
}

现在您可以将它添加到子组件中的 useEffect 依赖项中

function ChildComponent({someParentfunc}) {
  const [input1 , setInput1] = useState(10)
  const [input2 , setInput2] = useState(20)
  
  useEffect(() => {
    someParentfunc(input1,input2)
  }, [input1,input2, someParentfunc])

  return (
        <div>
          <input type="text"
            value={input1}
            onChange={event => setInput1(event.target.value) }
          />
        <input type="text"
            value={input2}
            onChange={event => setInput2(event.target.value) }
          />
       </div>
  )
}