Estado es cambiado, pero los componentes no se actualiza

Pregunta hecha: hace 8 meses Ultima actividad: hace 8 meses
up 1 down

Estoy cambiando el estado y puedo ver en el console.log el nuevo estado, sin embargo, el TextArea no muestra el nuevo estado, pero sólo cuando su muestra por primera vez.

Aquí está mi aplicación:

import React, {Component} from 'react';
import {TextArea} from "semantic-ui-react";

class Output extends Component {

    static myInstance = null;
    state = { keys:[] }

    updateState(){
        // this method is called from outside.. 
        this.setState({ keys:this.state.keys.push(0) });
        // I can see that keys are getting increase
        console.log(this.state.keys);
    }

    render() {
        return (
            <TextArea value={this.state.keys.length} />

        );
    }
}

TextArea seguirá mostrando 0, Aunque la longitud de state.keys aumenta ..

¿Alguna idea?

3 respuestas

up 3 down

Nunca mutar el estado. Para actualizar el estado, utilice la siguiente sintaxis:

this.setState(prevState => ({
  keys: [...prevState.keys, newItem]
}))
up 0 down

usted no llame a su updateState función para actualizar su estado, que sólo existe por allí, para empujar 0 a su estado con el fin de reRender su componente con nuevo estado, puede llamar a su método en el componentDidMount, como a continuación:

componentDidMount = () => {
  this.updateState()
}

esto va a ejecutar su updateState funcionar inmediatamente después de montajes de componentes en el DOM.

up 0 down

Aquí está el ejemplo de trabajo

En primer lugar debe llamar a su función para actualizar el estado

Ejemplo en jsFiddle

class Output extends React.Component {

 static myInstance = null;
 state = { keys:[] }

 componentDidMount(){
    this.updateState();
 }

 updateState() {
    const newKeys = [...this.state.keys,0]
  this.setState({ keys:newKeys });
 }
 onTextareaChange(){}

 render() {
  return (
    <textarea value={this.state.keys.length} onChange= {this.onTextareaChange} />
  );
 }
}

ReactDOM.render(<Output />, document.querySelector("#app"))