reactjs – React – 在setState中更改JSON对象

发布时间：2020-12-15 16:21:31 所属栏目：百科来源：网络整理

导读：我有一个包含三个字段的表单,handleChange方法在第一个字段(DateOfBirth)中工作,但不在(Id1)和(Id2)字段中工作. 由于某种原因,当我尝试更改(Id1 || Id2)字段的值时,setState会返回此错误. “组件正在改变文本类型的受控输入是不受控制的.输入元素不应从受控

我有一个包含三个字段的表单,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;

解决方法

从 react docs.起

The output of the updater is shallowly merged with prevState.

这意味着当你这样做

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

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

{
  Metadata: {
    Id1: "dummy"
  }
}

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!