validacion - validar formulario javascript html5

¿Cuál es la forma preferida de mutar un estado Reaccionar?

Question

Digamos que tengo una lista de objetos simples en mi this.state.list que luego puedo usar para presentar una lista de niños. ¿Cuál es la forma correcta de insertar objeto en this.state.list ?

A continuación se muestra la única forma en que creo que funcionará porque no se puede mutar el estado this.state directamente como se menciona en el documento.

this._list.push(newObject):
this.setState({list: this._list});

Esto me parece feo. ¿Hay una mejor manera?

Answer 1

De los documentos de reacción ( https://facebook.github.io/react/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous ):

Como this.props y this.state se pueden actualizar de forma asincrónica, no debe confiar en sus valores para calcular el siguiente estado.

Entonces deberías hacer esto en su lugar:

this.setState((prevState) => ({
  contacts: prevState.contacts.concat([contact])
}));

Answer 2

setState() se puede llamar con una función como parámetro:

this.setState((state) => ({ list: state.list.concat(newObj) }))

o en ES5:

this.setState(function(state) {
  return {
   list: state.list.concat(newObj)
  }
})

Answer 3

concat devuelve una nueva matriz, por lo que puede hacer

this.setState({list: this.state.list.concat([newObject])});

otra alternativa es el ayudante de inmutabilidad de React

  var newState = React.addons.update(this.state, {
      list : {
        $push : [newObject]
      }
  });

  this.setState(newState);

Answer 4

Actualización 2016

Con ES6 puedes usar:

this.setState({ list: [...this.state.list, ...newObject] });