Longitud de retorno de inserción de matriz
this.state.myArray.push('new value')
devuelve la longitud de la matriz extendida, en lugar de la matriz en sí. Array.prototype.push () .
Supongo que espera que el valor devuelto sea la matriz.
Inmutabilidad
Parece que es más bien el comportamiento de React:
NUNCA mutes this.state directamente, ya que llamar a setState () después puede reemplazar la mutación que hiciste. Trate este estado como si fuera inmutable. React.Componente .
Supongo que lo harías así (no familiarizado con React):
var joined = this.state.myArray.concat('new value');
this.setState({ myArray: joined })
console.log(this.state.myArray)
, siempre hay uno detrás. ¿Alguna idea de por qué?setState()
pone en cola los cambios en el estado del componente y le dice a React que este componente y sus hijos deben volver a renderizarse con el estado actualizado. Así que supongo que no se actualiza en ese momento justo después de configurarlo. ¿Podría publicar un ejemplo de código, donde podamos ver qué punto lo está configurando y registrando, por favor?.concat('new value');
debería ser.concat(['new value']);
concat()
método. Ver: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… ( Matrices y / o valores para concatenar en una nueva matriz. )Usando es6 se puede hacer así:
Sintaxis de propagación
fuente
this.props
ythis.state
puede actualizarse de forma asincrónica, no debe confiar en sus valores para calcular el siguiente estado". En el caso de modificar una matriz, dado que la matriz ya existe como una propiedad dethis.state
y necesita hacer referencia a su valor para establecer un nuevo valor, debe usar la forma desetState()
que acepta una función con el estado anterior como argumento. Ejemplo:this.setState(prevState => ({ myArray: [...this.state.myArray, 'new value'] }));
Ver: reactjs.org/docs/…El enfoque recomendado en versiones posteriores de React es usar una función de actualización al modificar estados para evitar condiciones de carrera:
Empuje la cuerda hasta el final de la matriz
Empuje la cadena al comienzo de la matriz
Empuje el objeto hasta el final de la matriz
Empuje el objeto al comienzo de la matriz
fuente
this.setState((prevState) => ({ myArray: [values, ...prevState.myArray], }));
No deberías estar operando el estado en absoluto. Al menos, no directamente. Si desea actualizar su matriz, querrá hacer algo como esto.
No es deseable trabajar directamente en el objeto de estado. También puede echar un vistazo a los ayudantes de inmutabilidad de React.
https://facebook.github.io/react/docs/update.html
fuente
.slice()
para crear una nueva matriz y preservar la inmutabilidad. Gracias por la ayuda.Puede usar el
.concat
método para crear una copia de su matriz con nuevos datos:Pero tenga cuidado con el comportamiento especial del
.concat
método al pasar matrices:[1, 2].concat(['foo', 3], 'bar')
resultará en[1, 2, 'foo', 3, 'bar']
.fuente
Este código funciona para mí:
fuente
fetch(`api.openweathermap.org/data/2.5/forecast?q=${this.searchBox.value + KEY} `) .then( response => response.json() ) .then( data => { this.setState({ reports: this.state.reports.push.apply(this.state.reports, data.list)}); });
this.state = { reports=[] }
... por favor, me gustaría saber qué estoy haciendo malReaccionar nativo
Si también desea que su UI (es decir, su flatList) esté actualizada, use PrevState: en el siguiente ejemplo, si el usuario hace clic en el botón, agregará un nuevo objeto a la lista (tanto en el modelo como en la UI )
fuente
De la siguiente forma podemos comprobar y actualizar los objetos
fuente
Aquí no puede empujar el objeto a una matriz de estado como esta. Puede empujar a su manera en una matriz normal. Aquí tienes que configurar el estado,
fuente
Si solo estás tratando de actualizar el estado así
Considere este enfoque
Básicamente, prevState está escribiendo this.state para nosotros.
fuente