2017-12-21 17 views
1

Noob質問です。私はWizardFormに2つの送信ボタンがあります。 3番目の手順でデータを送信し、4番目の手順で写真をアップロードします。写真のアップロードが成功した後、フォーム全体をどのようにレンダリングするのですか?私はフォームのクリーンな状態に戻ろうとしているので、ユーザーは通常のデータ入力フォームのようにデータを入力することができます。私は、次のエラーWizardForm__.a.forceUpdate is not a functionを与えるforceUpdate()を使ってWIzardフォームを再レンダリングするにはどうすればよいですか?

import React from 'react'; 
import {Field, reduxForm} from 'redux-form'; 
import validate from '../middleware/validate'; 
import { post } from 'axios'; 
import {BASE_URL} from '../middleware/api'; 
import {connect} from "react-redux"; 
import WizardForm from './WizardForm'; 

let WizardFormPhoto = (props) => { 
const {handleSubmit, pristine, previousPage, submitting} = props; 
const onFormSubmit = (data) => { 
    const {reset} = this.props; 
    let humanID = localStorage.getItem('humanID'); 
    let token =localStorage.getItem('idToken'); 
    const AuthStr = 'Bearer '.concat(token); 
    let formData = new FormData(); 
    formData.append('humanId', humanID); 
    formData.append('photo', data.profile_pic[0]); 

    const config = { 
     headers: {'content-type': 'multipart/form-data', 'Authorization' : AuthStr} 
    }; 
    const url = BASE_URL + 'human/upload'; 

    post(url, formData, config) 
     .then(function (response) { 
      alert(response.data.message); 
      reset(); 
      WizardForm.forceUpdate(); 
     }).catch(function (error) { 
      console.log(error); 
     }); 
}; 
return (
    <form onSubmit={handleSubmit(onFormSubmit)} className="form-horizontal"> 
     <div className="step-3"> 
      <div className="form-group"> 
       <label className="col-sm-2 control-label">Add Photo</label> 
       <div className="col-sm-10"> 
        <Field name="profile_pic" component="input" type="file"/> 
       </div> 
      </div> 
      <div className="clearfix"> 
       <button type="submit" className="next pull-right btn btn-primary">Submit</button> 
      </div> 
     </div> 
    </form> 
); 
}; 


export default reduxForm({ 
form: 'wizard', //     <------ same form name 
forceUnregisterOnUnmount: true, // <------ unregister fields on unmount 
validate, 
})(WizardFormPhoto); 

foreceUpdate()を呼び出す:

は、ここに私のコードです。どうすればそれを稼働させることができますか?

P.S:WizardFormが重要です。 WizardForm

import React, {Component} from 'react'; 
import PropTypes from 'prop-types'; 
import {connect} from "react-redux"; 
import {reduxForm} from 'redux-form'; 
import WizardFormFirstPage from './WizardFormFirstPage'; 
import WizardFormSecondPage from './WizardFormSecondPage'; 
import WizardFormPreview from './WizardFormPreview'; 
import WizardFormPhoto from './WizardFormThirdPage' 
import { 
isSubmitting, 
hasSubmitSucceeded, 
hasSubmitFailed 
} from 'redux-form' 

class WizardForm extends Component { 
constructor(props) { 
    super(props); 
    this.nextPage = this.nextPage.bind(this); 
    this.previousPage = this.previousPage.bind(this); 
    this.backToOne = this.backToOne.bind(this); 
    this.state = { 
     page: 1, 
    }; 
} 

nextPage() { 
    this.setState({page: this.state.page + 1}); 
} 

previousPage() { 
    this.setState({page: this.state.page - 1}); 
} 

backToOne() { 
    this.setState({page: 1,}) 
} 

render() { 
    const {onSubmit} = this.props; 
    const {page, submitSucceeded} = this.state; 
    return (
     <div> 
      {page === 1 && <WizardFormFirstPage onSubmit={this.nextPage}/>} 
      {page === 2 && 
      <WizardFormSecondPage 
       previousPage={this.previousPage} 
       onSubmit={this.nextPage} 
      />} 
      {page === 3 && 
      <WizardFormPreview 
       previousPage={this.previousPage} 
       onSubmit={values => { 
        onSubmit(values,() => { 
         this.setState({ 
          submitSucceeded: true 
         }); 
         this.nextPage() 
        }); 
       }} 
      />} 
      {submitSucceeded && page === 4 && 
      <WizardFormPhoto onSubmit={onSubmit}/> 
      } 
     </div> 
    ); 
} 
} 

WizardForm.propTypes = { 
onSubmit: PropTypes.func.isRequired, 
}; 

WizardForm = reduxForm({ 
form: 'wizard', 
initialValues: { 
    location: { 
     latitude: "0.0", 
     longitude: "0.0" 
    } 
    } 
})(WizardForm) 

WizardForm = connect(
state => ({ 
    submitting: isSubmitting('wizard')(state), 
    submitSucceeded: hasSubmitSucceeded('wizard')(state), 
    submitFailed: hasSubmitFailed('wizard')(state) 
}) 
)(WizardForm) 

export default WizardForm; 
+0

WizardFormがどのように定義されていますか? React.Componentを拡張していますか? – Dez

+0

はい。私はコードを追加しています。 –

+1

クラスのインスタンスをインスタンスではなく静的であるかのように呼び出すようです。いずれにしても、Reactコンポーネントで 'forceUpdate'を呼び出す必要はないと思います。 Reduxストア内のデータを更新すると、コンポーネントが再描画されるはずです。なぜここでは起こっていないのかを確かめるために、 'redux-form'に慣れていません。 –

答えて

0

を追加

次のようintializeFormアクションの作成者を使用しようとしましたか?

import { initialize as initializeForm } from 'redux-form'; 
 

 
dispatch(initializeForm('wizard', {}));

関連する問題