在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

来自反应文档。

更新器的输出与preState进行了浅合并。

也就是说当你这么做的时候

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

然后，状态中的元数据键将具有以下形状：

{
  Metadata: {
    Id1: "dummy"
  }
}

你看到问题了吗？现在使用Id2输入接收为值未定义（this.state.Metadata.Id2不存在），这将使react抛出一个有关非受控组件的错误。

修复它需要做的是创建嵌套对象属性的完整副本：

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