Question

我使用Redux表单版本6.8.0。

我有一个表单组件，它通过“mapStateToProps”函数得到它的“initialValues”。在第一次渲染时，一切都很好。

按照表单配置：

const CategoryChangeForm = reduxForm({
  form: 'change-category',
  validate: newCategoryValidate,
  enableReinitialize: true
})(CategoryChange);

当我更改字段“类别”并且更新成功时，我从firebase收到新的更新值。我通过提到的“mapStateToProps”函数将此更新值传递给“initialValues”：

function mapStateToProps(state, ownProps) {
    return {
    initialValues: { category: state.categories[ownProps.id].name, id: ownProps.id }
  };
}

我期望新值将应用于“类别”-Field组件。但它没有获得更新的价值。

我的“Field”组件的配置：

const fieldProps = {
  category: {
    name: 'category',
    type: 'text',
    placeholder: 'Bezeichnung',
    component: InputField
  },
  hidden: {
    name: 'id',
    type: 'hidden',
    component: 'input'
  }
};

这是我的表单组件：

export const CategoryChange = props => {
  const {
    color,
    message,
    handleSubmit,
    stateComponent
  } = props;

  console.log("Props: ", props);

  return (
    <span>
      <Subline color={ color } marginTop={ 70 } marginBottom={ 30 } align="center">{ message }</Subline>
      <form>
        <Field { ...fieldProps.category } />
        <Field { ...fieldProps.hidden } />
        <Button onClick={ handleSubmit(changeCategory.bind(stateComponent)) }>Ändern</Button>
        <Button marginBottom={ 5 } marginTop={ 10 }>Löschen</Button>
      </form>
    </span>
  );
}

我可以观察到更新后，我的表单组件会重新呈现2次。第一次将其“初始化”的道具设置为“真实”。但它第二次设置为“假”。第二次渲染是由于包装我的表单组件的hoc组件的stateChange而发生的。更新成功时会触发the hoc的“setState”，并向用户显示相应的消息。但是第二次渲染的原因是表单组件没有初始化。

如果您需要更多代码，请与我们联系。

希望有人提示解决这个问题...

Answer 1

According to the docs：

默认情况下，您只能通过一次初始化表单组件   initialValues 即可。有两种方法可以重新初始化表单   新组件＆＃34; pristine＆＃34;值：



将enableReinitialize prop或reduxForm（）配置参数设置为   如果允许表单重新初始化新的＆＃34; pristine＆＃34;值   每次initialValues道具改变。保持脏的表单值   重新初始化时，可以将keepDirtyOnReinitialize设置为true。通过   默认情况下，重新初始化表单将替换所有脏值   ＆＃34;原始＆＃34;值。



发送INITIALIZE操作（使用提供的操作创建者）   终极版形式）。

您可以将CategoryChangeForm从函数更改为类，并在initialize方法中从redux-forms调用componentWillReceiveProps操作。

import {initialize} from 'redux-form'

CategoryChangeForm extends Component {
     ...
     componentWillReceiveProps(nextProps) {
       // check the props and call initialize when needed
     } 
}

mapDispatchToProps = dispatch =>  ({
    initialize: (data) => initialize('change-category', data)
})

reduxForm - 更新后的initialValues不适用

1 个答案: