太多的重新渲染。 React 限制了渲染的数量以防止无限循环。？

Posted 2023-02-22

【中文标题】太多的重新渲染。 React 限制了渲染的数量以防止无限循环。？

【英文标题】：Too many re-renders. React limits the number of renders to prevent an infinite loop.?

【发布时间】：2021-01-22 04:13:21

【问题描述】：

渲染以下组件时出现错误：

重新渲染过多。 React 限制了渲染的数量以防止无限循环。？

import React,  useState  from 'react';
     
function My() 
  const [NAME, setValue_] = useState([name:"",lname:""]);  //      usestate
  let arr = [ name: "man", lname: "Kumar" ];    //.......creating array for passing to set the value for State..
      
  setValue_(arr); //............passing array to Update data......

  console.log(NAME);   //..........Want to see updated Data....
        
  return(<> </>) //............... i didn't return anything........

【问题讨论】：

你不应该在某些事件上做setValue_。因为，JS/React 逐行运行您的代码，并且您打开了 setValue_。因此，在每次渲染时，您基本上都在调用 setValue_，这会导致无限渲染问题。

这能回答你的问题吗？ "Error: Too many re-renders. React limits the number of renders to prevent an infinite loop."

感谢兄弟……发自内心

我是网络开发新手

【参考方案1】：

import React,  useState  from 'react';
     
function My() 
  const [name, setName] = useState([ name: "man", lname: "Kumar" ]); 
        
  return(<>helloworld</>)

就是这样。只需将数组直接传递给状态，而不是稍后更新它。如果你真的需要这样玩，那么使用 useEffect。另外，请保持命名的一致性。 setValue 与名称的关系不太好。

【讨论】：

我的无限循环背后有什么问题

组件渲染 => 您在生命周期方法、函数或事件之外更新状态 => 组件重新渲染 => 等等。

请验证这个答案，以防其他人遇到同样的问题；）。