Estoy tratando de agregar datos a una matriz en varios índices según el elemento en el que haga clic el usuario, pero el último elemento de la matriz se vuelve a representar.

Creo que el problema se inicia cuando los elementos de la matriz se representan en un componente separado y se devuelven al componente principal que contiene el estado.

Aquí está el código de ejemplo que básicamente resume el problema.

Estado (que es correcto):

enter image description here

Lo que realmente se renderiza:

enter image description here

0
Nu Gnoj Mik 16 oct. 2018 a las 22:35

2 respuestas

La mejor respuesta

En su componente Letter, está configurando una propiedad 'letter' en la instancia de la clase, (this.letter) en lugar de usar los métodos integrados de React para administrar los accesorios y el estado (this.props.letter)

Debido a que está utilizando el índice de la matriz como clave en el método de renderizado de app.js, React mantendrá el componente existente en ese índice cuando vuelva a renderizar la lista. Debido a que su propiedad de 'letra' no ha cambiado en ese componente, obtendrá el mismo texto.

En resumen, use accesorios y estados para almacenar información. Abstenerse de configurar this.{variableName} en componentes a menos que esté almacenando información que no es necesaria para que el componente (o sus elementos secundarios) la procese.

En su caso, debe cambiar el método de renderizado de su componente de letra de

render() {
   return this.letter.text
}

Para

render() {
   return this.props.letter.text
}
3
Jordan Burnett 16 oct. 2018 a las 19:50

El problema es que está utilizando el índice de la matriz como 'clave' en array.map () y luego se entromete con el índice. Esto no se recomienda y puede causar comportamientos no deseados según React Docs.

En su lugar, declare una identificación separada como esta

this.elements = [{id: 1, text: 'a'}, {id:2, text: 'b'}, {id:3, text: 'c'}]

Y use key = {element.id} dentro de array.map ().

Esto también debería resolver el problema.

1
Flemin Adambukulam 16 oct. 2018 a las 20:22