React - 在setState中更改JSON对象

Question

我有一个包含三个字段的表单,handleChange方法在第一个字段(DateOfBirth)中工作,但不在(Id1)和(Id2)字段中工作.

由于某种原因,当我尝试更改(Id1 || Id2)字段的值时,setState会返回此错误.

"组件正在改变文本类型的受控输入,使其不受控制.输入元素不应从受控切换到非受控(反之亦然).在组件的生命周期内使用受控或不受控制的输入元素之间做出决定"

import React, { Component } from 'react';

class Form extends React.Component {

    constructor(props){
        super(props);
        this.state = { DateOfBirth:'1990-01-24', Metadata: {Id1:'33813518109', Id2:'John Doe'}}
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) { 
        const target = event.target;
        const name = target.name;        
        var value = target.value;         

        if(name === "Id1" || name === "Id2")            
            this.setState({Metadata:{[name]: value}});     
        else
            this.setState({[name]: value});
    }  

    render() { 
        return (             
            <div>
                <form onSubmit={this.handleSubmit}>                                          
                    <input name="DateOfBirth" type="date" onChange={this.handleChange} value={this.state.DateOfBirth} />                                           
                    <input name="Id1" type="text" onChange={this.handleChange} value={this.state.Metadata.Id1} />   
                    <input name="Id2" type="text" onChange={this.handleChange} value={this.state.Metadata.Id2} />
                </form>
            </div>            
        );
    }
}

export default Form;

Answer 1

来自反应文档.

updater的输出与prevState浅合并.

这意味着当你这样做

// name === 'Id1'
// value === 'dummy'
this.setState({Metadata:{[name]: value}});

然后Metadata键入状态将具有这种形状:

{
  Metadata: {
    Id1: "dummy"
  }
}

你看到了问题吗？现在输入Id2receive作为值undefined(this.state.Metadata.Id2不存在),这将使反应引发关于不受控制的组件的错误.

您需要做的就是制作嵌套对象属性的完整副本:

this.setState(prevState => ({
  Metadata:{
    ...prevState.Metadata,
    [name]: value
  }
}));