không thể đặt giá trị mặc định trong biểu mẫu dạng redux w. phản ứng

Question

Tôi không thể đặt giá trị mặc định của biểu mẫu w/biểu mẫu redux. Kết quả tôi đang tìm kiếm là một trường văn bản có thể chỉnh sửa để sau này gửi đến cơ sở dữ liệu. tức là cập nhật địa chỉ email.

Tôi đã thử đặt thuộc tính ở dạng thành giá trị hoặc defaultValue. Lưu ý: Tôi đã lấy mã lặp đi lặp lại để làm cho việc đọc này dễ dàng hơn chỉ với trường "tên".

bất kỳ thông tin chi tiết nào được đánh giá cao!

import React, { Component, PropTypes } from 'react'; 
    import { reduxForm } from 'redux-form'; 
    export const fields = [ 'name'] 

     //(container) page-profile.js 

      import React, { Component } from 'react'; 
      import { connect } from 'react-redux'; 
      import Profile from '../components/Profile'; 

      class PageProfile extends Component { 

       render() { 
       return (
       <Profile 
        userInfo = {this.props.userInfo} 
       /> 
       ) 
       } 
      } 
      // requiring this page before rendering -- breaks page 
      PageProfile.propTypes = { 
       //userInfo: PropTypes.object.isRequired 
      } 

      function mapStateToProps(state) { 
       return { 
       userInfo : state.auth.userInfo 
       } 
      } 


      // injection to child 
      export default connect(mapStateToProps, { 
      })(PageProfile); 





      // profile.js 

     export default class Profile extends Component { 
       render() { 
       const { fields: {name }, resetForm, handleSubmit, submitting } = this.props 
       return (
        <div> 
        <img className="image" src={this.props.userInfo.img_url}/> 

        <form onSubmit={handleSubmit}> 
        <div> 
        <div> 
         <label>name</label> 
         <div> 
         <input type="text" defaultValue={this.props.userInfo.name} placeholder="name" {...name}/> 
         </div> 
         {name.touched && name.error && <div>{name.error}</div>} 
        </div> 
         <button type="submit" disabled={submitting}> 
         {submitting ? <i/> : <i/>} Submit 
         </button> 
        </form> 
        </div> 
       ) 
       } 
      } 
      Profile.propTypes = { 
       fields: PropTypes.object.isRequired, 
       handleSubmit: PropTypes.func.isRequired, 
       resetForm: PropTypes.func.isRequired, 
       submitting: PropTypes.bool.isRequired 
      } 

      export default reduxForm({ 
       form: 'Profile', 
       fields, 
       validate 
      })(Profile) 

Answer 1

Bạn có thể cung cấp initialValues trong mapStateToProps reduxForm 's:

const mapFormToProps = { 
    form: 'Profile', 
    fields, 
    validate 
}; 

const mapStateToProps = (state, ownProps) => ({ 
    initialValues: { 
    name: ownProps.userInfo.name 
    } 
}); 

reduxForm(
    mapFormToProps, 
    mapStateToProps 
)(Profile) 

Sau đó chỉ cần ràng buộc như vậy: <input type="text" placeholder="name" {...name} />.