ページのリロード後も redux フォーム フィールドを保持する必要があります。したがって、これに対する私のアプローチは
最初にページが更新される前に、コンポーネントのすべてのフィールド値が componentDidUpdate メソッドの localstorage に保存されます
componentDidUpdate(prevProps, prevState) { prevProps.fields ? localStorage.setItem('fields', JSON.stringify(prevProps.fields)):null prevProps.fields ? localStorage.setItem('fields', JSON.stringify(prevProps.fields)):null }次に、ページを更新した後、localstorage に使用可能なフィールドがあるかどうかを確認し、それらのフィールド オブジェクトを reduxform の初期値に直接割り当てています。
let reduxFormFunc = reduxForm(
{
form: 'rentSelection',
destroyOnUnmount: false,
fields: guestEntryFields,
validate,
initialValues: getInitFields()
},
selectProps
)
function getInitFields() {
let initValues = {pgu: defaultpgu}
if(localStorage.getItem('fields') && JSON.parse(localStorage.getItem('fields')).listings.length>0){
console.log('selecting and assigning fields from localstorage')
let fields = JSON.parse(localStorage.getItem('fields'))
console.log(fields)
initValues['commonFields'] = fields.commonFields
initValues['listings'] = fields.listings
initValues['pgu'] = fields.pgu
}
console.log(initValues)
return initValues
}
export default reduxFormFunc(GuestEntry)
これで、GuestEntry 反応コンポーネントで「listings」、「pgu」、「commonFields」の値にアクセスできるようになりました。また、リスト オブジェクトにはネストされたレベルのオブジェクトが含まれます。反復およびアクセス中に、リストオブジェクト内のネストされたオブジェクトのすべての「値」属性文字列値がオブジェクトに変換されます
この議論から https://github.com/erikras/redux-form/issues/576 値属性で値プロパティを呼び出す必要があることを知りました。
listings[0].entry.value.value
ここで値は文字列ですが、オブジェクトに変換されるため、value.value を呼び出す必要があります。
この問題を解決する簡単な解決策はありますか? それともredux-formの最新バージョンで修正されていますか? 私は現在 "redux-form": "^4.2.0" を使用しています。