Javascript 使用React钩子时Reactjs中出现无限循环错误

我是一个新的反应，并试图使用反应挂钩，但我得到的错误。 我无法找出它在控制台中所说的导致无限循环的代码行

Too many re-renders. React limits the number of renders to prevent an infinite loop    
The above error occurred in the <ProcessingInvoiceScreen> component:
        in ProcessingInvoiceScreen (at CreateInvoiceBySkid.js:49)

---

我在这里做什么导致无限循环？

这一行导致了错误。每次组件被渲染时，都会调用setclosedSkids函数，并且组件会一次又一次地重新渲染：

   if(this.props.processingInvoiceSkids){
     setclosedSkids(this.props.processingInvoiceSkids.rows);
   }

将此块移动到useEffect回调函数：

const ProcessingInvoiceScreen = ({processingInvoiceSkids}) => {
    const [closedSkids, setclosedSkids] = useState({});
    const [selectedSkids, setSelectedSkids] = useState([]);
    
    useEffect(()=> {
      if(processingInvoiceSkids){
         setclosedSkids(processingInvoiceSkids.rows);
      }
    }, [processingInvoiceSkids.rows])
    
                
    return(
         <div>
             Hello World
         </div>
    )
}

const processingVoiceScreen=（{processingVoiceSkids}）=>{
const[closedSkids，setclosedSkids]=useState（{}）；
常数[selectedSkids，setSelectedSkids]=useState（[]）；
useffect（（）=>{
if（处理滑轨）{
设置ClosedSkids（处理VoiceSkids.rows）；
}
}，[ProcessingingVoiceSkids.rows]）
返回(
你好，世界
)
}

我建议将函数移出父组件。然后在父组件中：

    return(
        <div>             
          <ProcessingInvoiceScreen processingInvoiceSkid={this.processingInvoiceSkid}/> 
        </div>
    )

  

返回(
)

钩子和类组件不是混合设计的，可以使用类组件，也可以使用钩子。我强烈建议使用钩子。您正在另一个组件中创建组件，这可能会导致意外行为。试着把它们分开

    return(
        <div>             
          <ProcessingInvoiceScreen processingInvoiceSkid={this.processingInvoiceSkid}/> 
        </div>
    )