尝试更新子组件时使用 useEffect 时出现无限循环

Question

我试图在父组件通过 props 将更改传递给子组件时更新组件，所以我创建了一个这样的测试程序

父组件

   function Parent(props){
     const [newCount, setNewCount] = useState(0)
     const handleClick = (event)=>{
        event.preventDefault()
        setNewCount(count+1)
     }
     return <div>
                 <button className='btn btn-primary' type='submit' onClick={handleClick}>parent</button>
                 <Test newCount = {count}/>
            </div>
}

子组件

function Test(props){
    const [count, setCount] = useState(0)
    const {newCount} = props
    useEffect(()=>{
        setCount(count + 1) ### marked line
    },[newCount, count])
    return <button type='submit'>{count}</button>
}

只要点击父项的按钮，子项就会根据从其父项传递的“newCount”值重新呈现。我可以理解标有“###”的行会导致无限循环，但让我感到困惑的是，如果我将 setCount(count+1) 替换为 setCount(newCount+1) 那么我就不会再出现无限循环了。有人可以帮我解释一下为什么吗？提前谢谢你

Answer 1

您已将计数添加为 useEffect 的依赖项，它本身会更新计数，因此 useEffect 会在循环中触发

useEffect(()=>{
    setCount(count + 1) ### marked line
},[newCount, count]); // problem due to use of count here

当您更改为 setCount(newCount + 1) 时，您将从 useEffect 中删除依赖项计数，因此它不再导致无限循环

既然你想根据父状态更新子状态，你必须实际使用

useEffect(()=>{
    setCount(newCount) ### marked line
},[newCount]);

但是你可以直接使用 props 的计数值，并通过从父级传递一个更新函数作为 props 来更新它，而不需要复制到本地状态

P.S. 可能只是 post 中的错字，但在父级中你需要使用 newCount 而不是 count 在更新状态时，因为计数未在父级中定义

const handleClick = (event)=>{
    event.preventDefault()
    setNewCount(newCount+1)
 }

Answer 2

在您的 useEffect 子组件中删除计数，我希望它会有所帮助

function Test(props){
  const [count, setCount] = useState(0)
  const {newCount} = props
  useEffect(()=>{
    setCount(count + 1) ### marked line
  },[newCount])
  return <button type='submit'>{count}</button>
}

尝试更新子组件时使用 useEffect 时出现无限循环

Infinity loop when using useEffect while try to update children component

infinite-loop

reactjs

react-hooks

use-effect