Por favor, explique en detalle por qué este código conduce a un error. He leído el artículo con solución a este problema (const contadores = [...prevState.counters];). Pero por qué sucede no está claro para mí.
Cuando hace clic en el botón, ve que el contador se incrementa dos veces. Esperamos un incremento de 1. ¿Por qué mutar prevState hace que el contador se incremente en 2?
// App.js import React, { Component } from 'react'; import Counter from './Counter'; export default class App extends Component { state = { counters: [0, 0], }; clickHandler = index => { this.setState((prevState, prevProps) => { let counter = prevState.counters[index]; const counters = prevState.counters; counters[index] = ++counter; return { counters, }; }); }; render() { const counters = this.state.counters.map((counter, index) => ( <Counter counter={counter} key={index} clickHandler={() => this.clickHandler(index)} /> )); return <React.Fragment>{counters}</React.Fragment>; } } // Counter.js import React from 'react'; const Counter = ({ counter, clickHandler }) => { return ( <React.Fragment> <div>{counter}</div> <button onClick={clickHandler}>Increment the counter above!</button> </React.Fragment> ); }; export default Counter;Regla número 1 de reaccionar: NO MUTAR ESTADO.
this.setState((prevState, prevProps) => { let counter = prevState.counters[index]; const counters = prevState.counters; counters[index] = ++counter; <-- THIS LINE MUTATES counters return { counters, }; });Debiera ser:
this.setState((prevState) => ({ // return a new array with map, DON't mutate the old one counters: prevState.counters.map((c,i) => i === index ? c++ : c); }));Estás viendo un incremento doble porque:
React.StrictMode yAsí que el punto sigue en pie, NO MUTES DE ESTADO.
Si usa mi ejemplo con React.StrictMode, verá si da como resultado un solo incremento. Es porque el artículo titulado "el camino correcto" en realidad te muestra el camino INCORRECTO .
Si usa React.StrictMode y nota diferencias lógicas, es porque está haciendo algo mal. Mencioné anteriormente lo que está haciendo mal, está mutando en estado (como lo muestra el artículo).
Nunca jamás nunca nunca jamás estado mutado. Devuelva siempre nuevos objetos/matrices, nunca actualice los existentes.