variable - para terminar las instrucciones en javascript se utiliza

Forma correcta de empujar a la matriz de estado

Question

Parece que tengo problemas para insertar datos en una matriz de estado. Estoy tratando de lograrlo de esta manera:

this.setState({ myArray: this.state.myArray.push(''new value'') })

¿Pero creo que esta es una forma incorrecta y causa problemas con la mutabilidad?

Answer 1

Nunca se recomienda mutar el estado directamente.

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 al final de la matriz

this.setState(prevState => ({
myArray: [...prevState.myArray, "new value"]
}))

Empuje la cadena al comienzo de la matriz

this.setState(prevState => ({
myArray: ["new value", ...prevState.myArray]
}))

Empujar objeto al final de la matriz

this.setState(prevState => ({
myArray: [...prevState.myArray, {"name": "object"}]
}))

Empujar objeto al comienzo de la matriz

this.setState(prevState => ({
myArray: [ {"name": "object"}, ...prevState.myArray]
}))

Answer 2

Empujar matriz devuelve longitud

this.state.myArray.push(''new value'') devuelve la longitud de la matriz extendida, en lugar de la matriz misma.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

Supongo que esperas que el valor devuelto sea la matriz.

Inmutabilidad

Parece que es más bien el comportamiento de React:

NUNCA mute this.state directamente, ya que llamar a setState () luego puede reemplazar la mutación que realizó. Trate este estado como si fuera inmutable.

https://facebook.github.io/react/docs/component-api.html

Supongo que lo harías así (no familiarizado con React):

var joined = this.state.myArray.concat(''new value'');
this.setState({ myArray: joined })

Answer 3

Reaccionar-Nativo

si también desea que su IU (es decir, su lista plana) esté actualizada, use PrevState: en el ejemplo a continuación, si el usuario hace clic en el botón, agregará un nuevo objeto a la lista (tanto en el modelo como en la IU )

data: [''shopping'',''reading''] // declared in constructor
onPress={() => {this.setState((prevState, props) => {
return {data: [new obj].concat(prevState.data) };
})}}. 

Answer 4

Este código funciona para mí:

fetch(''http://localhost:8080'')
.then(response => response.json())
.then(json => {
this.setState({mystate: this.state.mystate.push.apply(this.state.mystate, json)})
})

Answer 5

No deberías estar operando el estado en absoluto. Al menos, no directamente. Si desea actualizar su matriz, querrá hacer algo como esto.

var newStateArray = this.state.myArray.slice();
newStateArray.push(''new value'');
this.setState(myArray: newStateArray);

Trabajar en el objeto de estado directamente no es deseable. También puedes echar un vistazo a los ayudantes de inmutabilidad de React.

https://facebook.github.io/react/docs/update.html

Answer 6

Puede usar el método .concat para crear una copia de su matriz con nuevos datos:

this.setState({ myArray: this.state.myArray.concat(''new value'') })

Pero tenga cuidado con el comportamiento especial del método .concat al pasar matrices: [1, 2].concat([''foo'', 3], ''bar'') dará como resultado [1, 2, ''foo'', 3, ''bar'']

Answer 7

Usando es6 se puede hacer así:

this.setState({ myArray: [...this.state.myArray, ''new value''] }) //simple value
this.setState({ myArray: [...this.state.myArray, ...[1,2,3] ] }) //another array

Sintaxis extendida