reducexを使用してアクションを送出した後にフィールド値を更新する方法

Question

ajaxを呼び出したあとにreduxを使用してフォームを作成したいとします。

私の場合は非常に単純です：

• 私は（今のところ唯一の1つのテキストフィールドを持つ）、単純なユーザーフォームを持っている、それがconnect()と状態にバインド反応するビューです。
• ユーザーをフェッチするために、残りのAPIを呼び出します。
• api呼び出しが完了すると、ユーザーがアクションをディスパッチします。
• リデューサは、ストア状態をユーザーに更新します。
• 取得した値をフォームに入力/更新したいとします。

解決方法1：

私はそのような小道具から値を設定する場合：

const Field = ({ field, onFieldChange, value }) => (
    <input 
    value={value} 
    onChange={(event) => { onFieldChange(field, event.target.value) }} 
    type="text" 
    /> 
) 

それは動作しますが、私はこの警告を得る：

Field is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). 

を私は理解してなぜ私は何かを表示するためにコンポーネントを使用すべきではなく、またそれを更新することができるので、このエラーが発生します。

また、defaultValueの小道具を使用しようとしましたが、これはコンポーネントの作成時にのみ使用されます（まだユーザーはいません）。 ajax呼び出しの戻り後、defaultValueを呼び出すことはできません。

解決方法2：カスタムプラグインと

使用Reduxのフォームは、フォームモデルに状態が更新されるたびに更新します。私はこの解決策が本当にきれいだとは思わないが、多分私は間違っている。

私は間違った方向に行き、より良い方法で存在するはずです。

誰かが既にこの種の問題に直面していますか？

Answer 1

入力値としてundefinedを渡そうとしたときに同じ問題が発生しました。あなたが入力に少なくとも空の文字列を渡していることを確認し、この問題を解決するには

、ない未定義

const Field = ({ field, onFieldChange, value }) => (
    <input 
    value={value || ''} // <- add fallback value here 
    onChange={(event) => { onFieldChange(field, event.target.value) }} 
    type="text" 
    /> 
) 

Answer 2

1. 実際にあなたがあなたのコンポーネントステートフルを作ってみるかもしれない - 店との内部の入力の値を管理しますそれ（they say it's ok）。
2. または、あなたが本当にこの値を店舗で使用する必要がある場合は、redux-formを使用してください。私は本当に良い経験をしています（より定型的なコードを書く必要があります）。 ところで、あなたは

   よりhere

を参照してください、あなたは initialValuesを使用することができ、任意のカスタムプラグインを使用する必要はありません上記の溶液を確実に動作しますが、素敵ではないようです。