this.state.value returning Undefined when it is changed

Asked

Viewed 25 times

-3

I am developing a system and a part of it will be register and edit the schedules, I am able to return the data of times on the screen, but when I try to edit and click on the button to give an UPDATE in the database this.set.value returns Undefined, follows my code.

import React, { Component } from 'react';
import { Button } from 'reactstrap';

import './index.css';

export default class HorarioFuncionamento extends Component {

    constructor() {
        super();
        this.state = {        
            horariosSeg: {},
            horariosTer: {},
            horariosQua: {},
            horariosQui: {},
            horariosSex: {},
            horariosSab: {},
            horariosDom: {},

            valueSeg: '',
            valueHorUuidSeg: '',
            valueHorIniSeg: '',
            valueHorFimSeg: '',
            valueHorTemEntSeg: '',

            valueTer: '',
            valueHorUuidTer: '',
            valueHorIniTer: '',
            valueHorFimTer: '',
            valueHorTemEntTer: '',

            valueQua: '',
            valueHorUuidQua: '',
            valueHorIniQua: '',
            valueHorFimQua: '',
            valueHorTemEntQua: '',

            valueQui: '',
            valueHorUuidQui: '',
            valueHorIniQui: '',
            valueHorFimQui: '',
            valueHorTemEntQui: '',

            valueSex: '',
            valueHorUuidSex: '',
            valueHorIniSex: '',
            valueHorFimSex: '',
            valueHorTemEntSex: '',

            valueSab: '',
            valueHorUuidSab: '',
            valueHorIniSab: '',
            valueHorFimSab: '',
            valueHorTemEntSab: '',

            valueDom: '', 
            valueHorUuidDom: '',
            valueHorIniDom: '',
            valueHorFimDom: '',
            valueHorTemEntDom: '',           
        }
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.setState({
            valueSeg: event.target.valueSeg,
            valueHorUuidSeg: event.target.valueHorUuidSeg,
            valueHorIniSeg: event.target.valueHorIniSeg,
            valueHorFimSeg: event.target.valueHorFimSeg,
            valueHorTemEntSeg: event.target.valueHorTemEntSeg,

            valueTer: event.target.valueTer,
            valueHorUuidTer: event.target.valueHorUuidTer,
            valueHorIniTer: event.target.valueHorIniTer,
            valueHorFimTer: event.target.valueHorFimTer,
            valueHorTemEntTer: event.target.valueHorTemEntTer,

            valueQua: event.target.valueQua,
            valueHorUuidQua: event.target.valueHorUuidQua,
            valueHorIniQua: event.target.valueHorIniQua,
            valueHorFimQua: event.target.valueHorFimQua,
            valueHorTemEntQua: event.target.valueHorTemEntQua,

            valueQui: event.target.valueQui,
            valueHorUuidQui: event.target.valueHorUuidQui,
            valueHorIniQui: event.target.valueHorIniQui,
            valueHorFimQui: event.target.valueHorFimQui,
            valueHorTemEntQui: event.target.valueHorTemEntQui,

            valueSex: event.target.valueSex,
            valueHorUuidSex: event.target.valueHorUuidSex,
            valueHorIniSex: event.target.valueHorIniSex,
            valueHorFimSex: event.target.valueHorFimSex,
            valueHorTemEntSex: event.target.valueHorTemEntSex,

            valueSab: event.target.valueSab,
            valueHorUuidSab: event.target.valueHorUuidSab,
            valueHorIniSab: event.target.valueHorIniSab,
            valueHorFimSab: event.target.valueHorFimSab,
            valueHorTemEntSab: event.target.valueHorTemEntSab,

            valueDom: event.target.valueDom,
            valueHorUuidDom: event.target.valueHorUuidDom,
            valueHorIniDom: event.target.valueHorIniDom,
            valueHorFimDom: event.target.valueHorFimDom,
            valueHorTemEntDom: event.target.valueHorTemEntDom,
        });
    }

    componentDidMount() {
        const token = localStorage.getItem('token');

        const requestInfo = {
            method: 'GET',
            headers: new Headers({
                'Authorization': `Bearer ${token}`
            }),
        };

        fetch('http://localhost:8080/api/v1/horario-funcionamento', 
        requestInfo, {
            setTimeout: 3000
        })
        .then(response => {
            if(response.ok) {
                return response.json();
            }
            throw new Error('Opss! Ocorreu um erro. :(');
        })
        .then(horarios => this.setState({ 
            horariosSeg: horarios.horarios[1],
            horariosTer: horarios.horarios[2],
            horariosQua: horarios.horarios[3],
            horariosQui: horarios.horarios[4],
            horariosSex: horarios.horarios[5],
            horariosSab: horarios.horarios[6],
            horariosDom: horarios.horarios[0],

            valueSeg: horarios.horarios[1].hor_dia,
            valueHorUuidSeg: horarios.horarios[1].horario_uuid,
            valueHorIniSeg: horarios.horarios[1].hor_inicio,
            valueHorFimSeg: horarios.horarios[1].hor_fim,
            valueHorTemEntSeg: horarios.horarios[1].hor_tempo_entrega_estimado,

            valueTer: horarios.horarios[2].hor_dia,
            valueHorUuidTer: horarios.horarios[2].horario_uuid,
            valueHorIniTer: horarios.horarios[2].hor_inicio,
            valueHorFimTer: horarios.horarios[2].hor_fim,
            valueHorTemEntTer: horarios.horarios[2].hor_tempo_entrega_estimado,

            valueQua: horarios.horarios[3].hor_dia,
            valueHorUuidQua: horarios.horarios[3].horario_uuid,
            valueHorIniQua: horarios.horarios[3].hor_inicio,
            valueHorFimQua: horarios.horarios[3].hor_fim,
            valueHorTemEntQua: horarios.horarios[3].hor_tempo_entrega_estimado,

            valueQui: horarios.horarios[4].hor_dia,
            valueHorUuidQui: horarios.horarios[4].horario_uuid,
            valueHorIniQui: horarios.horarios[4].hor_inicio,
            valueHorFimQui: horarios.horarios[4].hor_fim,
            valueHorTemEntQui: horarios.horarios[4].hor_tempo_entrega_estimado,

            valueSex: horarios.horarios[5].hor_dia,
            valueHorUuidSex: horarios.horarios[5].horario_uuid,
            valueHorIniSex: horarios.horarios[5].hor_inicio,
            valueHorFimSex: horarios.horarios[5].hor_fim,
            valueHorTemEntSex: horarios.horarios[5].hor_tempo_entrega_estimado,

            valueSab: horarios.horarios[6].hor_dia,
            valueHorUuidSab: horarios.horarios[6].horario_uuid,
            valueHorIniSab: horarios.horarios[6].hor_inicio,
            valueHorFimSab: horarios.horarios[6].hor_fim,
            valueHorTemEntSab: horarios.horarios[6].hor_tempo_entrega_estimado,

            valueDom: horarios.horarios[0].hor_dia,
            valueHorUuidDom: horarios.horarios[0].horario_uuid,
            valueHorIniDom: horarios.horarios[0].hor_inicio,
            valueHorFimDom: horarios.horarios[0].hor_fim,
            valueHorTemEntDom: horarios.horarios[0].hor_tempo_entrega_estimado,
        })
        )
        .catch(e => console.log(e));
    }

    updateHor = () => {
        alert("Horário inicio no domingo => " + this.state.valueHorIniDom);
    }

    render() {
        return (            
            <form>
                <fieldset>
                    <fieldset className="grupo">
                        <div className="campo" hidden={true}>
                            <label htmlFor="dia">HorUUID</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueHorUuidDom } onChange={this.handleChange} readOnly={true} />
                        </div>
                        <div className="campo">
                            <label htmlFor="dia">Dia</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueDom } onChange={this.handleChange} readOnly={true} />
                        </div>   
                        <div className="campo">
                            <label htmlFor="hor-ini">Horário Ínicio</label>
                            <input type="text" id="hor-ini" name="hor-ini" style={{ width: '10em' }} value={ this.state.valueHorIniDom } onChange={this.handleChange} />
                        </div>  
                        <div className="campo">
                            <label htmlFor="hor-fim">Horário Fim</label>
                            <input type="text" id="hor-fim" name="hor-fim" style={{ width: '10em' }} value={ this.state.valueHorFimDom } onChange={this.handleChange} />
                        </div>
                        <div className="campo">
                            <label htmlFor="tem-entrega-estimado">Tempo de Entrega Estimado</label>
                            <input type="text" id="tem-entrega-estimado" name="tem-entrega-estimado" style={{ width: '10em' }} value={ this.state.valueHorTemEntDom } onChange={this.handleChange} />
                        </div>
                    </fieldset>  
                    <fieldset className="grupo">
                        <div className="campo" hidden={true}>
                            <label htmlFor="dia">HorUUID</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueHorUuidSeg } onChange={this.handleChange} readOnly={true} />
                        </div>
                        <div className="campo">
                            <label htmlFor="dia">Dia</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueSeg } onChange={this.handleChange} readOnly={true} />
                        </div>   
                        <div className="campo">
                            <label htmlFor="hor-ini">Horário Ínicio</label>
                            <input type="text" id="hor-ini" name="hor-ini" style={{ width: '10em' }} value={ this.state.valueHorIniSeg } onChange={this.handleChange} />
                        </div>  
                        <div className="campo">
                            <label htmlFor="hor-fim">Horário Fim</label>
                            <input type="text" id="hor-fim" name="hor-fim" style={{ width: '10em' }} value={ this.state.valueHorFimSeg } onChange={this.handleChange} />
                        </div>
                        <div className="campo">
                            <label htmlFor="tem-entrega-estimado">Tempo de Entrega Estimado</label>
                            <input type="text" id="tem-entrega-estimado" name="tem-entrega-estimado" style={{ width: '10em' }} value={ this.state.valueHorTemEntSeg } onChange={this.handleChange} />
                        </div>
                    </fieldset>  

                    <fieldset className="grupo">
                        <div className="campo" hidden={true}>
                            <label htmlFor="dia">HorUUID</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueHorUuidTer } onChange={this.handleChange} readOnly={true} />
                        </div>
                        <div className="campo">
                            <label htmlFor="dia">Dia</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueTer } onChange={this.handleChange} readOnly={true} />
                        </div>   
                        <div className="campo">
                            <label htmlFor="hor-ini">Horário Ínicio</label>
                            <input type="text" id="hor-ini" name="hor-ini" style={{ width: '10em' }} value={ this.state.valueHorIniTer } onChange={this.handleChange} />
                        </div>  
                        <div className="campo">
                            <label htmlFor="hor-fim">Horário Fim</label>
                            <input type="text" id="hor-fim" name="hor-fim" style={{ width: '10em' }} value={ this.state.valueHorIniTer } onChange={this.handleChange} />
                        </div>
                        <div className="campo">
                            <label htmlFor="tem-entrega-estimado">Tempo de Entrega Estimado</label>
                            <input type="text" id="tem-entrega-estimado" name="tem-entrega-estimado" style={{ width: '10em' }} value={ this.state.valueHorIniTer } onChange={this.handleChange} />
                        </div>
                    </fieldset>  

                    <fieldset className="grupo">
                        <div className="campo" hidden={true}>
                            <label htmlFor="dia">HorUUID</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueHorUuidQua } onChange={this.handleChange} readOnly={true} />
                        </div>
                        <div className="campo">
                            <label htmlFor="dia">Dia</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueQua } onChange={this.handleChange} readOnly={true} />
                        </div>   
                        <div className="campo">
                            <label htmlFor="hor-ini">Horário Ínicio</label>
                            <input type="text" id="hor-ini" name="hor-ini" style={{ width: '10em' }} value={ this.state.valueHorIniQua } onChange={this.handleChange} />
                        </div>  
                        <div className="campo">
                            <label htmlFor="hor-fim">Horário Fim</label>
                            <input type="text" id="hor-fim" name="hor-fim" style={{ width: '10em' }} value={ this.state.valueHorIniQua } onChange={this.handleChange} />
                        </div>
                        <div className="campo">
                            <label htmlFor="tem-entrega-estimado">Tempo de Entrega Estimado</label>
                            <input type="text" id="tem-entrega-estimado" name="tem-entrega-estimado" style={{ width: '10em' }} value={ this.state.valueHorIniQua } onChange={this.handleChange} />
                        </div>
                    </fieldset>  

                    <fieldset className="grupo">
                        <div className="campo" hidden={true}>
                            <label htmlFor="dia">HorUUID</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueHorUuidQui } onChange={this.handleChange} readOnly={true} />
                        </div>
                        <div className="campo">
                            <label htmlFor="dia">Dia</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueQui } onChange={this.handleChange} readOnly={true} />
                        </div>   
                        <div className="campo">
                            <label htmlFor="hor-ini">Horário Ínicio</label>
                            <input type="text" id="hor-ini" name="hor-ini" style={{ width: '10em' }} value={ this.state.valueHorIniQui } onChange={this.handleChange} />
                        </div>  
                        <div className="campo">
                            <label htmlFor="hor-fim">Horário Fim</label>
                            <input type="text" id="hor-fim" name="hor-fim" style={{ width: '10em' }} value={ this.state.valueHorIniQui } onChange={this.handleChange} />
                        </div>
                        <div className="campo">
                            <label htmlFor="tem-entrega-estimado">Tempo de Entrega Estimado</label>
                            <input type="text" id="tem-entrega-estimado" name="tem-entrega-estimado" style={{ width: '10em' }} value={ this.state.valueHorIniQui } onChange={this.handleChange} />
                        </div>
                    </fieldset>  

                    <fieldset className="grupo">
                        <div className="campo" hidden={true}>
                            <label htmlFor="dia">HorUUID</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueHorUuidSex } onChange={this.handleChange} readOnly={true} />
                        </div>
                        <div className="campo">
                            <label htmlFor="dia">Dia</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueSex } onChange={this.handleChange} readOnly={true} />
                        </div>   
                        <div className="campo">
                            <label htmlFor="hor-ini">Horário Ínicio</label>
                            <input type="text" id="hor-ini" name="hor-ini" style={{ width: '10em' }} value={ this.state.valueHorIniSex } onChange={this.handleChange} />
                        </div>  
                        <div className="campo">
                            <label htmlFor="hor-fim">Horário Fim</label>
                            <input type="text" id="hor-fim" name="hor-fim" style={{ width: '10em' }} value={ this.state.valueHorIniSex } onChange={this.handleChange} />
                        </div>
                        <div className="campo">
                            <label htmlFor="tem-entrega-estimado">Tempo de Entrega Estimado</label>
                            <input type="text" id="tem-entrega-estimado" name="tem-entrega-estimado" style={{ width: '10em' }} value={ this.state.valueHorIniSex } onChange={this.handleChange} />
                        </div>
                    </fieldset>  

                    <fieldset className="grupo">
                        <div className="campo" hidden={true}>
                            <label htmlFor="dia">HorUUID</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueHorUuidSab } onChange={this.handleChange} readOnly={true} />
                        </div>
                        <div className="campo">
                            <label htmlFor="dia">Dia</label>
                            <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ this.state.valueSab } onChange={this.handleChange} readOnly={true} />
                        </div>   
                        <div className="campo">
                            <label htmlFor="hor-ini">Horário Ínicio</label>
                            <input type="text" id="hor-ini" name="hor-ini" style={{ width: '10em' }} value={ this.state.valueHorIniSab } onChange={this.handleChange} />
                        </div>  
                        <div className="campo">
                            <label htmlFor="hor-fim">Horário Fim</label>
                            <input type="text" id="hor-fim" name="hor-fim" style={{ width: '10em' }} value={ this.state.valueHorIniSab } onChange={this.handleChange} />
                        </div>
                        <div className="campo">
                            <label htmlFor="tem-entrega-estimado">Tempo de Entrega Estimado</label>
                            <input type="text" id="tem-entrega-estimado" name="tem-entrega-estimado" style={{ width: '10em' }} value={ this.state.valueHorIniSab } onChange={this.handleChange} />
                        </div>
                    </fieldset>  
                </fieldset>
                <Button color="primary" block style={{ width: "100%", marginTop: "15px" }} onClick={this.updateHor}> Entrar </Button>
            </form>
        );
    }
}
javascript react fetch

1 answer

-1

There is no Event.target.XXX properties that you wrote.

For your case, just make handleChange a function that returns another function. The property name can be passed as the argument for the creation of Handler.

For example:

<input onChange={this.handleChange('valueSeg')} />

Where:

handleChange(propriedade) {
  return (event) => {
    this.setState({
      [propriedade]: event.target.value,
    });
  };
}

Here’s a pro tip: if you’re writing something repetitive many, many times, it’s probably a sign that something isn’t right. Remember that developers always look for smart solutions (or in other words, "lazy").

Browser other questions tagged javascript react fetch

You are not signed in. Login or sign up in order to post.