javascript - Javascript对象元素未定义

尝试记录存储在dataEdited中作为对象的name，day和dob元素的值。其中两个元素显示未定义，只有一个显示正确的值。
这是代码

/*    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"

我不知道这是怎么可能的，请给我一个解释。另外，我该如何解决？

最佳答案

执行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()

更多信息：https://stackoverflow.com/a/50837784/10201813