0

即使在页面重新加载后，我也需要保留 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 组件中访问“listings”、“pgu”、“commonFields”值。并且列表对象包含对象的嵌套级别。在迭代和访问它时，它的所有“值”属性列表对象内嵌套对象的字符串值都被转换为对象

从这个讨论 https://github.com/erikras/redux-form/issues/576 我知道我们必须在 value 属性上调用 value 属性，像这样

listings[0].entry.value.value

这里的值是一个字符串，但是当它转换为对象时，我需要调用 value.value。

那么有什么快速解决方案来解决这个问题吗？还是在最新版本的 redux-form 中修复？我目前正在使用“redux-form”：“^4.2.0”，

4

2 回答 2

0

在这个版本中我没有找到任何替代方式，所以我只是更新了代码，如果我将值作为对象的实例获取，那么我将使用“object.value”返回值，否则我只是简单地返回值。

于 2016-09-27T06:31:46.820 回答
0

我不确定这是否是最佳实践，但我很容易redux-localstorage将redux-form values字段保存到本地存储。这意味着表单状态对象将在验证规则和注册字段等方面保持原样，但值将保持不变（这很重要，因为我不希望验证告诉我字段在它们之前是无效的触摸）。

slicer我在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 config.slicer 文档。

编辑：毕竟我决定去设置，initialValues因为我想结合一种在表单中具有默认值的方法以及持久化表单数据。在我之前的解决方案中，我注意到initialValues与持久化一起使用redux-form values会导致问题。但是，将表单数据复制到存储中的单独键以及使用initialValues似乎可以解决问题。

为此，我将initialValuesRedux Form 的初始化期间设置为我的默认表单状态（保存在 redux 存储中）和持久表单值（也保存在存储中）的组合。我还使用onChange处理程序来执行我的操作创建器，它将表单值存储在商店的单独部分中，并redux-localstorage保留它。代码如下：

// initialState.js
export default {
  values: {}
  initialValues: {
    agreeToTerms: false,
  },
};

// Form.js
Form = connect(state => ({
  initialValues: {
    ...state.initialValues, // our defaults
    ...state.values, // our persisted values
  },
  onChange: (values, dispatch, props) => {
    props.myReduxActionFile.updateValues(values);
  },
}))(Form);

// myReduxActionFile.js
...code to dispatch action to update store.values

// store.js
const enhancer = compose(
  applyMiddleware(thunk),
  persistState('values')
);
于 2018-10-03T01:03:27.180 回答