redux-form을 Axios에서 가져온 값으로 초기화 할 수 없습니다.

Question

redux-form의 버전 6.7.0을 사용하고 있습니다. Axios는 httpx 요청을 성공적으로 수행하면 초기화 할 수 없습니다. "fetchPerson"redux 조치. ReduxForm을 내보낼 때 여전히 "enableReinitialize : true"로 설정하고 있지만 여전히 결과를 렌더링하지 않습니다. (, BTW 유효성 검사 기능, 호출되지 않는) 여기 내 감속기의 전체 코드

: 여기

import React, { Component } from 'react'; 
import { Field, reduxForm } from 'redux-form'; 
import { fetchPerson, editPerson } from '../actions'; 
import { connect } from 'react-redux'; 
import { Link} from 'react-router-dom'; 
import 'react-table/react-table.css'; 


class EditPerson extends Component { 
    componentDidMount() { 

    const { id } = this.props.match.params; 
    this.props.fetchPerson(id); 

    } 

    renderField(field) { 
    const { meta: { touched, error } } = field; 
    const className = `form-group ${touched && error ? 'has-danger' : ''}`; 

    return (

     <div className={className}> 
     <label>{field.label}</label> 
     <input 
      className="form-control" 
      type="text" 
      {...field.input} 
     /> 
     <div className="text-help"> 
      {touched ? error : ''} 
     </div> 
     </div> 
    ); 
    } 

    onSubmit(values) { 
    const { id } = this.props.match.params; 
    this.props.editPerson(id,values,() => { 
     this.props.history.push('/personas'); 
    }); 
    } 

    render() { 
    const { handleSubmit } = this.props; 
    const { person } = this.props; 
    if (!person) { 
     return <div>Loading...</div>; 
    } 
    console.log("this.props"); 
    console.log(this.props); 
    return (
      <div className="row"> 
       <div className="col-lg-12"> 
        <div className="row wrapper border-bottom white-bg page-heading"> 
         <div className="col-lg-10"> 
          <h2>Editar Persona {person.name}</h2> 
          <ol className="breadcrumb"> 
           <li> 
            <a href="index.html">Home</a> 
           </li> 
           <li> 
            <a href="personas/">Personas</a> 
           </li> 
           <li className="active"> 
            <strong>Editar Persona :{person.name}</strong> 
           </li> 
          </ol> 
         </div> 
        </div> 
       </div> 

       <div className="wrapper wrapper-content animated fadeInRight"> 

        <div className="row"> 
         <div className="col-lg-6"> 
          <div className="row"> 
           <div className="col-lg-12"> 
            <div className="well" style={{background: 'white'}}> 
            <h3>Datos</h3> 

             <form onSubmit={handleSubmit(this.onSubmit.bind(this))}> 
             <Field 
              label="Nombre" 
              name="name" 
              component={this.renderField} 
             /> 
             <Field 
              label="Email" 
              name="email" 
              component={this.renderField} 
             /> 
             <Field 
              label="Telefono" 
              name="tel" 
              component={this.renderField} 
             /> 
             <button type="submit" className="btn btn-primary">Submit</button> 
             <Link to="/personas" className="btn btn-danger">Cancel</Link> 
             </form> 

            </div> 

           </div> 
          </div> 
         </div> 
        </div> 

       </div> 
      </div> 
     ) 
    } 

} 

function validate(values) { 
    // console.log(values) -> { title: 'asdf', categories: 'asdf', content: 'asdf' } 
    const errors = {}; 

    // Validate the inputs from 'values' 
    if (!values.name) { 
    errors.title = "Enter a name"; 
    } 
    if (!values.email) { 
    errors.categories = 'Enter some email'; 
    } 
    if (!values.tel) { 
    errors.content = 'Enter some content telefono'; 
    } 

    return errors; 
} 

function mapStateToProps(state) { 
    console.log("state mapStateToProps"); 
    console.log(state); 
    return { 
     person: state.personas.person, 
     initialValues:state.personas.person, 
    } 
}; 


export default reduxForm({ 

    enableReinitialize : true, 
    form: 'PersonEditForm' 
})(
    connect(mapStateToProps,{ editPerson, fetchPerson })(EditPerson) 
); 

personas.person이이 두 번째 줄에서 만든 것 브라우저 콘솔은 다음과 같습니다

Answer 1

REDUX 양식 문서는 reduxForm 기능하고 접속 기능으로 장식되는 구성 요소를 나타낸다. 같은 뭔가 그것을 깨는 시도 :

EditPerson = reduxForm({ 
... 
})(EditPerson) 

export default connect(mapStateToProps, { ... })(EditPerson) 

또한 값을 한 번만 초기화됩니다 있습니다. 원하는 경우 위에서 initialValues ​​객체를 폼에 전달하고 라이브러리에서 initialize 액션을 전달하여 초기 값을 다시 채울 수 있습니다.