1

Estoy utilizando Redux con React para implementar una plataforma que procesa facturas de venta. EL componente padre importa varios componentes a sus vez, uno de ellos es el componente con información del cliente, "SalesInfo" como se indica a continuación:

render() {
const currentNumber = `FV-${this.props.sales.invoice.consecutive}`;
return (
  <div className="sales-container">
    <ModuleTitle title={this.state.title} 
      charge={true} 
      numberLabel={true} 
      number={currentNumber} 
      type={this.state.titleType} 
    />
    <SalesInfo />
    <AddProduct withoutCategory={true} />
    <div className="sales-center-container">
      <SalesTable />
      <SalesSubTotal />
    </div>
    <SalesTotal type={this.state.type} />
  </div>
);

Este componente "SalesInfo" tiene un estado que lee la información actual del store mediante props usando connect.

componentWillMount() {
this.setState({
  name: this.props.auth.client.data.name,
  address: this.props.auth.client.data.address,
  cellphone: this.props.auth.client.data.cellphone,
  nit: this.props.auth.client.data.nit,
});
}

Cuando finaliza la venta en el componente "SalesTotal" hay un boton para reiniciar los campos en el store para colocar las condiciones iniciales para generar otra orden.

Problema El problema que tengo es que la acción de limpiar los campos se ejecuta correctamente, el store se actualiza, pero el componente hijo "SalesInfo " no se renderiza nuevamente y debo cambiar de ruta para que tome los cambios del store. Que puedo implementar para que lea los cambios del store o se renderice nuevamente?

Update Se debe tener presente que los campos son de tipo input, por lo tanto se usa la siguiente forma para renderizarlo:

<input type="text"
      className="input-text" 
      name="name" 
      onChange={this.handleChange}
      onKeyPress={this.handleKeyPress}
      value={this.state.name}
      placeholder="Cliente Particular"
/>

Cuando es de tipo "label" con solo adjudicar el valor del store es suficiente para actualizar el componente sin renderizarlo de nuevo. Por lo tanto la pregunta va enfocada hacia los campos tipo input. He intentado aplicar lo que dice la documentación al respecto sin éxito. Documentación

Gracias por sus respuesta.

1 respuesta 1

0

Sino me equivoco, esto te ocurre porque estás seteando las props en el state en CWM, ésta función es llamada únicamente en la carga una vez. Me imagino, ya que no has puesto el código del dispatch que estás actualizando el store con los campos de los inputs y no directamente el state. Podría ser de la siguiente forma:

No usar el state del componente sino directamente las props del store.

  value={this.props.auth.client.data.name,}
1
  • Hola Adolfo, gracias por tu respuesta, hay una dificultad con la opción que dices y es que al colocar en el value el valor directamente del store cuando vas a editar el input text no se observa el cambio porque no cambia el state del componente. Esta dificultad la solucione implementando la función componentWillReceiveProps proporcionada por React para actualizar los cambios del state cuando un props es actualizado. Saludos Commented el 7 mar. 2018 a las 15:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.