Reactjs：如何在反應-Redux的形式取子對象數據

Question

中的API提供以如下方式數據（JSON格式）：

[ 
    { 
    "_id": 1, 
    "name": "XYZ", 
    "address": { 
     "street": "", 
     "pin_code": 69856, 
     "country": "US", 
     "city": "Boston" 
    } 
    } 
] 

如何可以取從address從以上響應中的字段？我正在使用react-redux表單。

這裏是表單字段：

import React, {Component} from 'react'; 
import {reduxForm} from 'redux-form'; 

class FetchUserForm extends Component { 
render() { 
    const { fields: {name, street, country}, handleSubmit } = this.props; 
    return(
    <form onSubmit={handleSubmit}> 
     <div className='form-group'> 
     <input type='text' className='form-control' placeholder='User Name' {...name}/> 
     </div> 

     <div className='form-group'> 
     <input type='text' className='form-control' placeholder='Street' {...street}/> 
     </div> 
     <div className='form-group'> 
     <input type='text' className='form-control' placeholder='country' {...country}/> 
     </div> 

     <button type='submit' className='btn btn-primary'> Update </button> 
     <button type='reset' className='btn btn-default'> Cancel </button> 
    </form> 
); 
} 
} 

export default reduxForm ({ 
    form: 'FetchUserForm', 
    fields: ['name', 'street', 'country'] 
},null, { fetchUser })(FetchUserForm); 

正如所看到的，我試圖從數據的子對象獲取街道和鄉村。有人可以幫助我獲得表格中的實際數據。現在我得到null

Answer 1

您錯過了以顯示代碼/組件您正在使用此表單的位置。然而，我猜你在其他/相同的組件中的某個地方，你應該從redux-form調用initialize。因爲，你沒有提供太多的信息，我在這裏假設一些事情，但總體而言，這是應該的：

import React, {Component} from 'react'; 
import {reduxForm} from 'redux-form'; 
import { connect } from 'react-redux'; 
import { initialize } from 'redux-form'; 

class SomeClass extends Component { 
    constructor(props){ 
    super(props); 
    } 
    render() { 
    const myInitialValues = { 
     initialValues: { 
      "name": this.props.user.name, 
      "street": this.props.user.address.street, //note this 
      "country": this.props.user.address.country //and this 
     } 
    } 
    const { handleSubmit } = this.props; 
     return(
      <FetchUserForm {...myInitialValues} onSubmit={this.someFunction.bind(this)}/>  
     ); 
    } 
} 

function mapStateToProps(state) { 
    return{ 
    user:state.user 
    } 
} 

export default connect(mapStateToProps,{someAction})(SomeClass); 

檢查我如何在initialValues對象聲明的變量/字段名。通常這是可以做到的。希望你有一個全面的想法..