Reactjs 如何在react js中使用复杂的json对象管理状态

下面是到目前为止我所拥有的代码，我的状态与一个稍微复杂的对象不符合预期，我能够处理一个简单的对象，在我的状态中没有嵌套对象，并且它的工作符合预期。

如果我不在customer对象中使用personalInfo或contactInfo，并且使用了所有属性并创建简单的customer对象，则状态分配工作正常

    import React, {PropTypes} from 'react';
    import {Grid,Row,Col,Button,Label} from 'react-bootstrap';
    import {connect} from 'react-redux';
    import * as customerActions from '../../actions/customerActions';
    import {bindActionCreators} from 'redux';

    class AddCustomer extends React.Component{
      constructor(props , context){
        super(props , context);

    this.state={
      customer:{
        personalInfo:{
          firstName:"",
          lastName:"",
          dob:"",
          ssn:""

        },
        contactInfo:{
          address:"",
          addressLine2:"",
          city:"",
          state:"",
          zip:"",
          phoneNumber:"",
          emailAddress:""
        }
      }
    };
    this.handleChange = this.handleChange.bind(this);
    this.onClickCancel = this.onClickCancel.bind(this);
    this.onClickSave = this.onClickSave.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    this.setState({
      customer: {
        personalInfo:{

        },
        contactInfo:{

        },
        ...this.state.customer,
        [name]: value
      }
    });
    console.log(this.state.customer);
  }

  onClickCancel(){

  }

  onClickSave(){
    this.props.actions.createCustomer(this.state.customer);
  }

  render() {
    return (
      <div className="container-fluid">
        <Grid>
          <Row className="show-grid">
            <Col xs={10} md={10}><b>ADD A LEAD</b></Col>
            <Col xs={2}  md={2}>
              <Button>&times;</Button>
            </Col>
          </Row>
          <Row className="show-grid">
            <Col xs={12} md={12}>
              <hr/>
            </Col>
          </Row>
          <p><b>Personal Information</b></p>
          <br/>
          <Row className="show-grid">
            <Col xs={6} md={6}>
              <Row><Label>First Name*</Label></Row>
              <Row><input name="personalInfo.firstName" type="text" value={this.state.customer.personalInfo.firstName} onChange={this.handleChange} required="true"/></Row>
            </Col>
            <Col xs={6} md={6}>
              <Row><Label>Last Name*</Label></Row>
              <Row><input name="personalInfo.lastName" type="text"  value={this.state.customer.personalInfo.lastName} onChange={this.handleChange} required="true"/></Row>
            </Col>
          </Row>
          <br/>
          <Row className="show-grid">
            <Col xs={2} md={2}>
              <Row><Label>Date of Birth*</Label></Row>
              <Row><input name="personalInfo.dob" type="text" value={this.state.customer.personalInfo.dob} onChange={this.handleChange} required="true"/></Row>
            </Col>
            <Col xs={2} md={2}>
              <Row><Label>SSN*</Label></Row>
              <Row><input name="personalInfo.ssn" type="text"  value={this.state.customer.personalInfo.ssn} onChange={this.handleChange} required="true"/></Row>
            </Col>

          </Row>
          <br/>
          <p><b>Contact Information</b></p>
          <br/>
          <Row className="show-grid">
            <Col xs={6} md={6}>
              <Row><Label>Address</Label></Row>
              <Row><input name="contactInfo.address" type="text"  value={this.state.customer.contactInfo.address} onChange={this.handleChange}/></Row>
            </Col>
            <Col xs={6} md={6}>
              <Row><Label>Address Line 2</Label></Row>
              <Row><input name="contactInfo.addressLine2" type="text" value={this.state.customer.contactInfo.addressLine2} onChange={this.handleChange}/></Row>
            </Col>
          </Row>
          <br/>

          <Row className="show-grid">
            <Col xs={2} md={2}>
              <Row><Label>City</Label></Row>
              <Row><input name="contactInfo.city" type="text" value={this.state.customer.contactInfo.city} onChange={this.handleChange}/></Row>
            </Col>
            <Col xs={2} md={2}>
              <Row><Label>State</Label></Row>
              <Row><input name="contactInfo.state" type="text" value={this.state.customer.contactInfo.state}  onChange={this.handleChange}/></Row>
            </Col>
            <Col xs={2} md={2}>
              <Row><Label>Zip</Label></Row>
              <Row><input name="contactInfo.zip" type="text"  value={this.state.customer.contactInfo.zip} onChange={this.handleChange}/></Row>
            </Col>
          </Row>
          <br/>
          <Row className="show-grid">
            <Col xs={4} md={4}>
              <Row><Label>Phone Number</Label></Row>
              <Row><input name="contactInfo.phoneNumber" type="text" value={this.state.customer.contactInfo.phoneNumber}  onChange={this.handleChange}/></Row>
            </Col>
            <Col xs={4} md={4}>
              <Row><Label>Email Address</Label></Row>
              <Row><input name="contactInfo.emailAddress" type="text" value={this.state.customer.contactInfo.emailAddress} onChange={this.handleChange}/></Row>
            </Col>
          </Row>
          <br/>
          <Row className="show-grid">
              <hr/>
          </Row>
          <Row className="show-grid">
            <input className="pull-right" type="submit" onClick={this.onClickCancel} value="Cancel"/>
            <input className="pull-right" type="submit" bsStyle="primary" onClick={this.onClickSave} value="Add"/>
          </Row>
        </Grid>
      </div>
    );
  }
}
AddCustomer.propTypes={
  actions:PropTypes.object.isRequired,
  customer:PropTypes.array.isRequired

};

function mapStateToProps(state, ownProps) {
  return{
    customer:state.customer
  };
}

function mapDispatchToProps(dispatch) {
  return{
    actions: bindActionCreators(customerActions,dispatch)
  };
}

export default connect(mapStateToProps,mapDispatchToProps)(AddCustomer);

import React，{PropTypes}来自'React'；
从“react bootstrap”导入{网格、行、列、按钮、标签}；
从'react redux'导入{connect}；
从“../../actions/customerActions”导入*作为customerActions；
从“redux”导入{bindActionCreators}；
类AddCustomer扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
这个州={
客户：{
个人信息：{
名字：“，
姓氏：“，
出生日期：“，
ssn:“
},
联系人信息：{
地址：“，
地址行2:“”，
城市：“，
州：“，
邮政编码：“，
电话号码：“，
电子邮件地址：“
}
}
};
this.handleChange=this.handleChange.bind（this）；
this.onClickCancel=this.onClickCancel.bind（this）；
this.onClickSave=this.onClickSave.bind（this）；
}
手变（活动）{
const target=event.target；
const value=target.type=='checkbox'？target.checked:target.value；
const name=target.name；
这是我的国家({
客户：{
个人信息：{
},
联系人信息：{
},
…这个。州。顾客，
[名称]：值
}
});
console.log（this.state.customer）；
}
onClickCancel（）{
}
onClickSave（）{
this.props.actions.createCustomer（this.state.customer）；
}
render（）{
返回(
添加线索
&时代；

个人信息



名字*
姓*


出生日期*
SSN*


联系方式



地址
地址行2


城市
陈述
拉链


电话号码
电子邮件地址



);
}
}
AddCustomer.propTypes={
操作：需要PropTypes.object.isRequired，
客户：需要PropTypes.array.isRequired
};
函数mapStateToProps（状态，ownProps）{
返回{
顾客：state.customer
};
}
功能图DispatchToprops（调度）{
返回{
操作：bindActionCreators（customerActions、dispatch）
};
}
导出默认连接（mapStateToProps、mapDispatchToProps）（AddCustomer）；

我不确定您收到的未执行结果是什么，但我想您可以尝试以下方法：

handleChange（类型、名称、事件）{
const target=event.target；
const value=target.type=='checkbox'？target.checked:target.value；
这是我的国家({
客户：{
…这个。州。顾客，
[输入]：{
…this.state.customer[类型]，
[名称]：值
}
}
});
console.log（this.state.customer）；
}
...
render（）{
...
...
...
}

我不确定您收到的未执行结果是什么，但我想您可以尝试以下方法：

handleChange（类型、名称、事件）{
const target=event.target；
const value=target.type=='checkbox'？target.checked:target.value；
这是我的国家({
客户：{
…这个。州。顾客，
[输入]：{
…this.state.customer[类型]，
[名称]：值
}
}
});
console.log（this.state.customer）；
}
...
render（）{
...
...
...
}

问题是[name]：value没有向personalInfo或contactInfo添加属性问题是[name]：value没有向personalInfo或contactInfo添加属性