Soy nuevo en React, este es mi primer proyecto pequeño y simple. Recibo este error y encontré la razón por la que está sucediendo. Pero no sé dónde mi código renderiza repetidamente ese componente en particular. por favor ayúdame a abordar este problema.
function Button(props) { return(<button onClick={props.count(props.value)}>{props.value}</button>); } function Display(props) { return(<div>{props.messege}</div>); } function App() { const[counter,setCounter]=useState(0); const countfunction=(val)=> setCounter(counter+val); return( <div> <Button count={countfunction} value={10} /> <Button count={countfunction} value={5} /> <Button count={countfunction} value={1} /> <Button count={countfunction} value={120} /> <Display messege={counter}/> </div> ); } ReactDOM.render(<App/>,document.getElementById('mountNode'));```Este es mi estado de error
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. at checkForNestedUpdates at scheduleUpdateOnFiber at dispatchAction at Object.countfunction [as count] at Button at renderWithHooks at updateFunctionComponent at beginWork at beginWork$1 at performUnitOfWorkEsta es la línea ofensiva
return(<button onClick={props.count(props.value)}>{props.value}</button>);Esto se debe a que la función se llama al renderizar, en lugar de cuando se hace clic en ella, para que solo se ejecute al hacer clic, debe envolverla en una función anónima, así ...
return(<button onClick={() => props.count(props.value)}>{props.value}</button>);