Javascript элементы объекта не определены

Question

Попытка записать значения name , day и dob элементов, хранящихся в dataEdited , как объект. Отображаются два элемента Не определено только с одним отображением правильного значения. Вот код

/*    two-way state binding   */
dataChange(event){
        const target = event.target;
        const value = target.value; //gets value of the textbox
        const name = target.name;

        this.setState({ dataEdited: {[name]: value} });
    }
handleUpdate(event){
        event.preventDefault();
        const {name,day,dob} = this.state.dataEdited;
        console.log(name, day, dob);

        /* this.setState({ toggle: false }) */

    }   

Состояние

this.state = {
            name: '',
            day: '',
            dob: '',
            items : [],
            currentItem: {},
            dataEdited: {},
            toggle: false,
            loading: false
        }

Визуализация

<form onSubmit={this.handleUpdate}>
                                <input 
                                    className=""
                                    name="name"                             
                                    onChange={this.dataChange}
                                    defaultValue={this.state.currentItem.name}
                                    placeholder= "Celebrant's Name" 
                                    ref={name => this.name = name}
                                    required /> 
                                <input 
                                    className=""
                                    type="number" 
                                    name="day"
                                    min="1" 
                                    max="31"
                                    ref={day => this.day = day}
                                    onChange={this.dataChange}
                                    defaultValue={this.state.currentItem.day}
                                    placeholder= "day"  />
                                <input 
                                    className=""
                                    name="dob"
                                    type="month"                                
                                    onChange={this.dataChange}
                                    defaultValue={this.state.currentItem.dob} />

                                <button type="submit">update</button>
                                <button onClick={this.handleEditCancel}>cancel</button>
</form>

Это результат на консоли

undefined undefined "2020-08"

I не понимаю, как это возможно, могу ли я получить объяснение. Кроме того, как я могу это исправить?

Answer 1

Когда вы выполняете this.setState({ dataEdited: {[name]: value} });, вы перезаписываете другие значения в объекте, присвоенном dataEdited.

Вы должны изменить это значение на this.setState({ dataEdited: { ...this.state.dataEdited, [name]: value} });, чтобы сохранить предыдущие значения внутри this.state.dataEdited

ОБНОВЛЕНИЕ (Спасибо @JMadelaine) : Вы должны использовать this.setState(prev => ({ dataEdited: { ...prev.dataEdited, [name]: value}}));, чтобы никакие одновременные изменения состояния не влияли на setState()

Дополнительная информация: { ссылка }

Answer 2

Проблема

вы перезаписываете одну и ту же переменную dataEdited снова и снова при вызове this.setState({ dataEdited: {[name]: value} }); Таким образом, внутри dataEdited

Solution

* будет присутствовать только последняя измененная информация 1008 * Отдельно сохранить данные или соответствующим образом изменить функцию setState

Answer 3

Вы перезаписываете переменную состояния dataEdited каждый раз, когда вызываете

this.setState({ dataEdited: {[name]: value} });

, поэтому вы хотите изменить распространение объекта dataEdited и state. После этого добавьте или измените имя, dob или день

  this.setState({
  ...this.state,
  dataEdited: { ...this.state.dataEdited, [name]: value }
});

CodeSandbox здесь