reactjs - single - this setstate undefined react

Reaccionar setState no se actualiza inmediatamente

Question

Estoy trabajando en una aplicación de todo. Esta es una versión muy simplificada del código ofensivo. Tengo una casilla de verificación:

 <p><input type="checkbox" name="area" checked={this.state.Pencil} onChange={this.checkPencil}/> Writing Item </p>

Aquí está la función que llama a la casilla de verificación:

checkPencil(){
this.setState({
pencil:!this.state.pencil,
});
this.props.updateItem(this.state);
}

updateItem es una función asignada para despachar a redux

function mapDispatchToProps(dispatch){
return bindActionCreators({ updateItem}, dispatch);
}

Mi problema es que cuando llamo a la acción updateItem y console.log el estado, siempre está un paso atrás. Si la casilla de verificación no está marcada y no es verdadera, todavía obtengo el estado de verdadero que se pasa a la función updateItem. ¿Debo llamar a otra función para forzar la actualización del estado?

Answer 1

Ben tiene una gran respuesta sobre cómo resolver el problema inmediato, sin embargo, también recomendaría evitar duplicar el estado

Si un estado está en redux, su casilla de verificación debería estar leyendo su propio estado desde un accesorio o tienda en lugar de realizar un seguimiento del estado de verificación tanto en su propio componente como en la tienda global

Haz algo como esto:

<p>
<input
type="checkbox"
name="area" checked={this.props.isChecked}
onChange={this.props.onChange}
/>
Writing Item
</p>

La regla general es que si encuentra que se necesita un estado en varios lugares, úselo a un padre común (no siempre redux) para mantener una sola fuente de verdad

Answer 2

Cuando actualiza su estado utilizando una propiedad del estado actual, la documentación de React le recomienda utilizar la versión de llamada de función de setState lugar del objeto.

Entonces setState((state, props) => {...}) lugar de setState(object) .

La razón es que setState es más una solicitud para que el estado cambie en lugar de un cambio inmediato. React setState por lotes esas llamadas de setState para mejorar el rendimiento.

Lo que significa que la propiedad del estado que está comprobando podría no ser estable. Este es un peligro potencial a tener en cuenta.

Para obtener más información, consulte la documentación aquí: https://facebook.github.io/react/docs/react-component.html#setstate

Para responder a su pregunta, haría esto.

checkPencil(){
this.setState((prevState) => {
return {
pencil: !prevState.pencil
};
}, () => {
this.props.updateItem(this.state)
});
}

Answer 3

Debe invocar su segunda función como devolución de llamada a setState, ya que setState ocurre de forma asincrónica. Algo como:

this.setState({pencil:!this.state.pencil}, myFunction)

Sin embargo, en su caso, ya que desea que se llame a esa función con un parámetro, tendrá que ser un poco más creativo y quizás crear su propia función que llame a la función en los accesorios:

myFunction = () => {
this.props.updateItem(this.state)
}

Combina esos juntos y debería funcionar.

Answer 4

Es porque sucede de forma asincrónica , por lo que en ese momento podría no actualizarse aún ...

De acuerdo con la documentación de React v.16, debe usar una segunda forma de setState() que acepte una función en lugar de un objeto:

Las actualizaciones de estado pueden ser asincrónicas

React puede agrupar múltiples llamadas setState () en una única actualización para el rendimiento.

Debido a que this.props y this.state pueden actualizarse de forma asincrónica, no debe confiar en sus valores para calcular el siguiente estado.

Por ejemplo, este código puede fallar al actualizar el contador:

// Wrong
this.setState({
counter: this.state.counter + this.props.increment,
});

Para solucionarlo, use una segunda forma de setState () que acepte una función en lugar de un objeto. Esa función recibirá el estado anterior como primer argumento, y los accesorios en el momento en que se aplique la actualización como segundo argumento:

// Correct
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));

Answer 5

Llamar a setState() en React es asíncrono, por varias razones (principalmente rendimiento). Debajo de las cubiertas, React setState() múltiples llamadas para setState() en una sola mutación de estado, y luego volverá a representar el componente una sola vez, en lugar de volver a representar cada cambio de estado.

Afortunadamente, la solución es bastante simple: setState acepta un parámetro de devolución de llamada:

checkPencil(){
this.setState({
pencil:!this.state.pencil,
}, function () {
this.props.updateItem(this.state);
}.bind(this));
}

Answer 6

Primero establezca su valor. Después de proceder sus trabajos.

this.setState({inputvalue: e.target.value}, function () {
this._handleSubmit();
});
_handleSubmit() {
console.log(this.state.inputvalue);
//Do your action
}

Answer 7

Usé las sugerencias de rossipedia y Ben Hare e hice lo siguiente:

checkPencil(){
this.setState({
pencil:!this.state.pencil,
}, this.updatingItem);
}
updatingItem(){
this.props.updateItem(this.state)
}

Answer 8

prueba esto

this.setState({inputvalue: e.target.value}, function () {
console.log(this.state.inputvalue);
this.showInputError(inputs[0].name);
}); 

Función showInputError para validación si se usa algún formulario