我需要在页面重新加载后保留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 react组件中的“listing”，“pgu”，“commonFields”值。和listing对象包含嵌套的对象级别。在迭代和访问它时，它的所有“value”属性列表对象内的嵌套对象的String值都被转换为对象
从这个讨论中 https://github.com/erikras/redux-form/issues/576 我知道我们必须在value属性上调用value属性，就像这样
listings[0].entry.value.value
这里的值是一个字符串，但是当它转换为对象时我需要调用value.value。
那么解决这个问题的快速解决方案是什么？ 或者它是在最新版本的redux-form中修复的？我正在使用 “redux-form”：“^ 4.2.0”，
答案 0 :(得分：0)
我在这个版本中没有找到任何替代方法，所以我只是以这样的方式更新代码：如果我将值作为对象的实例获取，那么我将回复该值使用＆＃34; object.value＆＃34;，否则我只是简单地返回值。
答案 1 :(得分：0)
我不确定这是否是最佳实践，但是我很简单地使用redux-localstorage将redux-form values字段保存到本地存储。这意味着表单状态对象将按照验证规则和已注册的字段等保持原样，但是值将保持不变（这很重要，因为我不希望验证告诉我字段在输入之前是无效的感动）。
我在slicer的{{1}}对象中编写了一个自定义config，以便它知道要保留的表单状态的哪一部分。这是我的redux-localstorage文件的示例（我在此特定应用程序中使用了store.js，但您可能没有使用）：
redux-thunk我的import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import persistState from 'redux-localstorage';
import rootReducer from './reducers/root';
const enhancer = compose(
applyMiddleware(thunk),
persistState(['someOtherStateKey', 'form'], {
slicer: paths => state => {
let persist = {};
paths.forEach(path => {
switch (path) {
case 'form':
persist[path] = {
myFormName: {
values: state[path].myFormName.values,
},
};
break;
default:
persist[path] = state[path];
}
});
return persist;
},
})
);
function configureStore() {
return createStore(
rootReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__(),
enhancer
);
}
const store = configureStore(); // I instantiate here so I can `import` in utils files
export default store;
中将包含以下代码：
Form.js在此示例中，您无需担心手动更新或从本地存储中进行检索，也不需要安装或卸载组件侦听器。
有关详细信息，请参见Form = reduxForm({
form: 'myFormName',
})(Form);
redux-localstorage docs。
编辑：我决定继续设置config.slicer，因为我想结合使用在表单中具有默认值以及保留表单数据的方法。在我以前的解决方案中，我注意到将initialValues与initialValues一起使用会导致问题。但是，将表单数据复制到商店中的单独键上以及使用redux-form似乎可以解决问题。
为此，我将Redux Form初始化期间将values设置为默认表单状态（保存在redux存储中）和持久化表单值（也保存在存储中）的组合。我还利用initialValues处理程序来执行我的操作创建者，该创建者将表单值存储在存储区的单独部分中，并且initialValues对此保持不变。代码如下：
onChange