2017-08-08 10 views
7

還元型があり、initialValuesを使用してフォームを初期化しようとしています。次のコードは、フォームが名前や年齢のいずれかを実装されていない考える:Reduxの上next stateを検査する際redux-form初期値がマップとして作成されています

const EmployeesForm = reduxForm({ 
    form: 'addEmployee', 
    enableReinitialize: true 
})(EmployeesFormComponent) 

export default connect((state, ownProps) => { 
    const initialValues = { name: 'Jason', age: 24 } 
    return { 
    initialValues: initialValues 
    } 
})(EmployeesForm) 

をしかし、ウェブdevのコンソールで、私はform.valuesform.initialは両方の地図であることを見ることができますそれらのinitialValue値を保持するオブジェクトそれは、フォームに「合う」ように、私は、オブジェクトを変換する必要がありますどのように

enter image description here

。 私はimport { Field, reduxForm } from 'redux-form/immutable'を使用しています。それはredux-form 6.8.0です。

+1

あなたのコードはよく見えますが、実際にはこのサンドボックスで動作します:https://codesandbox.io/s/6xnrvwx3mn。多分、問題はあなたのコードのどこかにありますか?問題を再現するサンドボックスを準備できますか? – Dario

答えて

1

あなたの反応ネイティブフィールド定義に問題がある可能性があります。

<Field name="name" component={TextInput} /> 
<Field name="age" component={TextInput} /> 

これがフォームの正しい定義であることを確認してください。できればデバッグが容易になるようにコンポーネントマークアップも追加してください。

ことを考慮するためにあなたが反応するネイティブTextInputコンポーネント

const TextInputNative = ({ input: { onChange, ...inputProps }}) => { 
    return <TextInput onChangeText={onChange} 
      {...inputProps} /> 
} 

const EmployeesFormComponent =() => (
     <Field name="name" component={TextInputNative} /> 
     <Field name="age" component={TextInputNative} /> 
); 
のラッパーを作成する必要がありますので、また反応し、ネイティブReduxの形式で1より多くのトリッキーな部分ではなくのonChangeのonChangeTextコールバックです

これにより、フォームが初期値で更新されない可能性もあります。

0

限りimmutableJSが行くように、あなたがyourMap.toJS()

を使用して、オブジェクトとしてごinitialValueを得ることができる必要がありますしかし、あなたはそれがredux-form/immutableによって考慮されるよう、手動でオブジェクトにマップを変換する必要がない必要があります、およびReduxの形式のドキュメントごとに

あなたはReduxの形式の不変のバージョンを使用している、フォームをReduxの値はImmutable.Mapになり検証と提出のためにあなたを与える

あなたが不変のマップとそのすべてのジャズを必要としない場合、私はreduxformの不変でないバージョンのために行くことをお勧めしたいと思います。

関連する問題