varias variable valor utilizadas utiliza usada una tipos terminar son para más las instrucción instrucciones función devolver definir declarar declaracion cómo cuáles cuál asignar algunas javascript reactjs immutability

variable - para terminar las instrucciones en javascript se utiliza



Forma correcta de empujar a la matriz de estado (7)

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?


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] }))


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 })


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) }; })}}.


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)}) })


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


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'']


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