Quiero entender el resultado de estos códigos. Creo que está relacionado con las "teclas" de React.
const {useState} = React; /*export default*/ function App() { const [alphabets, setAlpabets] = useState([ { key: "b", name: "b2" }, { key: "b", name: "b" }, { key: "a", name: "a1" }, { key: "a", name: "a2" } ]); const handleChange = () => { setAlpabets([{ key: "a", name: "a3" }]); }; return ( <div className="App"> {alphabets.map(({ key, name }) => ( <p key={key}>{name}</p> ))} <button onClick={handleChange}>change</button> </div> ); } ReactDOM.render(<App />, document.getElementById("root")); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script> Este código representa b2 , b , a1 y a2 inicialmente, luego, cuando activé el botón de change , el resultado es b2 , a1 y a3 .
Esperaba que el resultado fuera a3 porque después de activar el botón, alpabets solo tiene la tecla "a". ¿Por qué tiene los otros?
Ese error es normal, cuando usa el mapa para recorrer una lista de elementos en una matriz y usa la key para ayudar a reaccionar en el magment de la referencia a cada elemento dentro del bucle, los accesorios key deben ser únicos para cada elemento en el bucle del map . En tu caso hay dos elementos con la misma clave.
{ key: "b", name: "b2" } { key: "b", name: "b" }Y
{ key: "a", name: "a1" } { key: "a", name: "a2" } Tienen el mismo valor para la propiedad key .
Para evitar usar el atributo key de cada objeto en la matriz, puede usar el índice de ese elemento como este
return ( <div className="App"> {alphabets.map(({ key, name }, index) => ( <p key={index}>{name}</p> ))} <button onClick={handleChange}>change</button> </div> );Puedes leer más sobre Array.prototype.map
Las claves de reacción deben ser únicas, las claves ayudan a reaccionar para rastrear los cambios ocurridos en el elemento.
Las teclas ayudan a React a identificar qué elementos han cambiado, se agregaron o se eliminaron. Las claves se deben dar a los elementos dentro de la matriz para dar a los elementos una identidad estable.
Ver más de Lista y Claves