4

me pueden dar luz con el siguiente problema que tengo en react... Resulta que tengo mi componente SendMail el cual es mapeado n veces como n sea el numero de filas que me devuelva mi responde de mi componente ListMonitoring.

Mi componente SendMail se genera n veces por ende debería tener un estado tipo...

state = {
  inputs: [...]
}

En donde dentro de inputs[] debería tener muchos estados, uno por cada iteracion de mi componente, pero no logro llegar a eso. Tal vez lo hago mal. Seria de mucha ayuda que alguien me indicara la forma correcta de lograr esto.

Dejo el código de mis componentes a continuación.

COMPONENTE 1 (ListMonitoring)

export default class ListMonitoring extends Component {
  state = {
    monitoring: [],
  }

  componentDidMount () {

    // acá hago mi llamada a la api para almacenar el response en mi estado

    this.setState({ monitoring: jsonStr.data })

  }

  render () {
    return (
      <Fragment>
        {
          [this.state.monitoring].map((monitor, index) => <RowMonitoring key={index} {...monitor} />)
        }
      </Fragment>
    )
  }
}

COMPONENTE 2 (RowMonitoring)

const RowMonitoring = (props) => {
  const { attributes: { morphoAccess, lastDate, count } } = props

  return (
    <Fragment>
      <tr>
        <td><FontAwesomeIcon icon={faArrowCircleDown} size='2x' className='red-text' /></td>
        <td>{morphoAccess}</td>
        <td>{new Date(lastDate).toLocaleString()}</td>
        <td>{count}</td>
        <td>
          <SendMail sede={morphoAccess} lastDate={lastDate} />
        </td>
      </tr>
    </Fragment>
  )
}

COMPONENTE 3 (SendMail)

export default class SendMail extends Component {
  state = {
    isLoading: false,
    inputs: [],
  }

   handleSendMail = () => {

     // enviar email

   }

  handleSubmitSendMail = (event) => {
    event.preventDefault()
    console.log('submit')
  }

  handleChange = (event, index) => {
    this.setState({
      inputs: {
        ...this.state.inputs[index],
        [event.target.name]: event.target.value,
      }
    })
  }

  render () {
    const { sede } = this.props
    const sedeLowerCase = sede.toLowerCase()

    console.log(this.props)

    return (
      <form onSubmit={this.handleSubmitSendMail}>
        <div className="row u-m-0">
          <div className="input-field col s6 u-m-0">
            <input
              name={`input_${sedeLowerCase}${this.props.index}`}
              type="text"
              onChange={(event) => this.handleChange(event, this.props.index)}
            />
            <label htmlFor={`input_${sedeLowerCase}`}>Email</label>
          </div>
          <div className="input-field col s6 u-m-0">
            <button type='submit' className='waves-effect waves-light btn' onClick={this.handleSendMail} disabled={this.state.isLoading}>
              {
                !this.state.isLoading
                  ? 'Enviar Email'
                  : 'Enviando...'
              }
            </button>
          </div>
        </div>
      </form>
    )
  }
}

[ SOLUCIONADO ]

Finalmente cada componente Form en este caso el componente de nombre SendMail guardaba su propio estado independiente. Por ende por cada instancia de este componente tenia su propio estado.

1 respuesta 1

3

Mira este ejemplo de la instancia de tu componente, donde estoy rendereando <SendMail index="1" sede="asdf" />:

class SendMail extends React.Component {
  state = {
    isLoading: false,
    inputs: []
  };

  handleSendMail = () => {
    // enviar email
  };

  handleSubmitSendMail = (event) => {
    event.preventDefault();
    console.log('submit');
  };

  handleChange = (event, index) => {
    this.setState({
      inputs: {
        ...this.state.inputs[index],
        [event.target.name]: event.target.value
      }
    });
  };

  render() {
    const { sede } = this.props;
    const sedeLowerCase = sede.toLowerCase();

    console.log(this.state, this.props);

    return (
      <form onSubmit={this.handleSubmitSendMail}>
        <div className="row u-m-0">
          <div className="input-field col s6 u-m-0">
            <input
              name={`input_${sedeLowerCase}${this.props.index}`}
              type="text"
              onChange={(event) => this.handleChange(event, this.props.index)}
            />
            <label htmlFor={`input_${sedeLowerCase}`}>Email</label>
          </div>
          <div className="input-field col s6 u-m-0">
            <button
              type="submit"
              className="waves-effect waves-light btn"
              onClick={this.handleSendMail}
              disabled={this.state.isLoading}
            >
              {!this.state.isLoading ? 'Enviar Email' : 'Enviando...'}
            </button>
          </div>
        </div>
      </form>
    );
  }
}

ReactDOM.render(<SendMail index="1" sede="asdf" />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Si ejecutas el snippet, verás que tu state pasa de ser "inputs": [] a "inputs": { "input_asdf1": "lo que sea que escribas" }, por tanto tu asunción de que tu state inputs dentro de SendMail debería tener varios estados es incorrecta, ya que cada instancia de SendMail que generas mantiene su propio estado. Tampoco debería tener acceso alguno de las instancias hermanas, ya que, citando la documentación de React, los estados no son accesibles desde otro componente excepto de aquel que lo posee y lo asigna.

De tu respuesta anterior, creo recordar que no querías usar redux, así que la manera que tendrías para hacer esto, (un único state donde tengas los valores de todos tus inputs) es poner tu <form> en alguno de los ancestros de SendMail que estimes conveniente y desde ahí definir tu función handleChange y pasarla como referencia dentro de los props de tus componentes.

1
  • Creo que ahora me explique mejor cierto? Y si toda la razón ! de hecho lo había solucionado y termine fijándome que cada instancia de mi componente SenMail mantenía su propio estado. Y claro después probé hacer lo que quería dejando el form en el componente padre para que me generara varios estados dentro del state inputs pero no es lo optimo, así que lo deje cada instancia con su propio estado.
    – vicasas
    Commented el 7 ago. 2019 a las 12:43

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.