太多的重新渲染。 React 限制了渲染的数量以防止无限循环。 UI 和控制台错误

Posted 2023-02-22

【中文标题】太多的重新渲染。 React 限制了渲染的数量以防止无限循环。 UI 和控制台错误

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

【发布时间】：2021-07-17 14:33:55

【问题描述】：

导入 useState, useEffect from 'react' 导入'./App.css';

函数 App()

const [count, setCount] = useState(0)

useEffect(() =>

console.log('render')

，[计数]）

首先： 在 UI 上向我显示，但在控制台上向我发送错误：重新渲染太多。 React 限制渲染次数以防止无限循环。

const plusCount = () =>

setCount(count + 1)     

const minsCount = () =>

setCount(count - 1)   

第二次：不要在 UI 上向我发送 UI 上的错误：重新渲染太多。 React 限制渲染次数以防止无限循环。

常量 makeCount =

add:setCount(count + 1),

discount:  setCount(count - 1)

返回 (

  <h1>Exercise</h1>
  <p>Cunt: <b>count</b></p>
  <button onClick=plusCount>Add</button>
  <button onClick=minsCount>Discount</button>

</div>

)

导出默认应用；

猜测： 为什么此消息两次都显示错误，但首先让我在 UI 上显示 第二个不要在 UI 上显示我

【参考方案1】：

您正在渲染时执行 setCount 函数，这会导致重新渲染，从而导致无限循环：

const makeCount = 
     add: setCount(count + 1),
     discount:setCount(count - 1)

这个对象实际上调用了 setCount 函数，而不是创建要调用的函数。

您需要将其更改为：

const makeCount = 
     add: () => setCount(count + 1),
     discount: () => setCount(count - 1)

这将生成名为 add 和 discount 的新函数，而不是调用 setCount。

【参考方案2】：

App.js

import React ,useState from 'react';
import  Child  from './Components/Child';


function App() 
    let value = [1,2,4,6];
    const number = (number,val)=>
    console.log(`$number: value $val`)

return (
<div className="App">
  
    value.map((item , i)=>
      return <Child count = item itemName=i key=i muFunc=number/>
    )
  
</div>
);

导出默认应用；

Child.js

import React,useState,useEffect from 'react';

export function Child (count,itemName,muFunc) 
    const [number, setnumber] = useState(count);
    useEffect(() => 
        muFunc(itemName,number);
    , [number]);
    const makeCount = 
        add: () => setnumber(number + 1),
        discount: () => setnumber(number - 1)
   

    // Send this number to parent ??
    return(
        <>
            <h3>itemName</h3>
            <button onClick =makeCount.discount>decrement</button>
            <input value=number onChange=(e)=>setnumber(e.target.value) />
            <button onClick =makeCount.add>Increment</button>
            <br/>
        
        </>
    )