如何使用复杂的JSON对象管理状态反应JS

Question

下面是我到目前为止，我的状态不会按预期工作有一个有点复杂对象的代码，我可以用一个简单的对象的工作，没有嵌套对象在我的状态，并按预期工作。如果我不使用personalInfo或CONTACTINFO客户对象内使用的所有属性，并创建简单的客户对象

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); 

Answer 1

我不知道什么是unxepcted结果

状态分配工作正常你会收到，但我想你可能会尝试这样的事情：

handleChange(type, name, event) { 
    const target = event.target; 
    const value = target.type === 'checkbox' ? target.checked : target.value; 
    this.setState({ 
    customer: { 
     ...this.state.customer, 
     [type]:{ 
     ...this.state.customer[type], 
     [name]: value 
     } 
    } 
    }); 
    console.log(this.state.customer); 
} 

... 

render() { 
    ... 

    <Row><input type="text" value={this.state.customer.personalInfo.firstName} onChange={this.handleChange.bind(this, 'personalInfo', 'firstName')} required="true"/></Row> 

    ... 

    <Row><input type="text" value={this.state.customer.contactInfo.address} onChange={this.handleChange.bind(this, 'contactInfo', 'address')}/></Row> 

    ... 
}