reactjs - qué - react router

Actualizar el estado del componente desde fuera de React(en la respuesta del servidor)

Question

Estoy en el proceso de aprender React. En este momento tengo varios components encadenados como padres e hijos, la comunicación entre ellos se realiza fácilmente con devoluciones de llamadas.

Tengo una tabla (componente de reacción) y una pequeña forma ajax modal (sin reaccionar). Cuando recibo la respuesta (un elemento) del servidor, me gustaría agregar el elemento a la tabla.

Mi pregunta principal es, ¿es posible activar un cambio de estado de componente desde afuera (en este caso en la respuesta del servidor)?

Answer 1

¿Puede activar un cambio de estado de componente fuera de un componente?

Sí. Aquí hay un simple ejemplo

En su componente de reacción configure un cierre disponible a nivel mundial que actualizará su estado cuando se active la función.

componentWillMount(){
 globalVar.callback = (data) => {
    // `this` refers to our react component
    this.setState({...});     
  };
}

Luego, cuando tu respuesta ajax''d vuelva, puedes disparar el evento con los datos devueltos.

globalVar.callback(data);

O para algo más robusto, configure un evento personalizado y un oyente global

Answer 2

component mejor práctica del estado de los component es mantener datos del state verdaderamente internos, no de interés fuera del componente. Si debe cambiar un componente de nuevos props uso de datos externos, simplemente cambie los props desde el exterior y la regeneración del componente reaccionará ante los cambios.

En función de los nuevos props el componente puede usarlos en el rerender, o cambiar el estado como lo hizo en el constructor. El lugar correcto para esta tarea es en componentWillReceiveProps , en este método puede cambiar el estado de nuevos apoyos sin entrar en un bucle eterno.

ACTUALIZACIÓN: from reaccionar 16.3 componentWillReceiveProps está en desuso y getDerivedStateFromProps debe ser utilizado, con una mejor detección de casos de mal uso y efectos secundarios. Consulte https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops