添加/删除表单后，初始表单值被丢弃答案

【问题标题】：Inititial form values get discarded after adding/removing the form添加/删除表单后，初始表单值被丢弃
【发布时间】：2019-04-09 07:53:59
【问题描述】：

我有一个NotificationList 组件，它从存储在列表中的获取数据中呈现NotificationCard。

//NotificatitonList.js
return this.props.notifications.list.map(n => {
  return (
    <div>
      <NotificationCard
        key={n.id}
        form={`updateNotification_${n.id}`}
        initialValues={n}
        notfId={n.id}
      />
    </div>
  );
});

NotificationCard 包含一个具有唯一名称的 redux-form

form={'updateNotification_${n.id}'} 和初始值initialValues={n}。

NotificationCard.js 的相关部分：

const formWrapperd = reduxForm({
  validate
})(NotificationCard);

export default connect(
  null,
  { someActions }
)(formWrapperd);

它有效。但是，如果我尝试将新的通知添加到存储在 redux 中的 notifications.list 的顶部，它会被添加，但我表单中的所有初始值也会被丢弃。如果我在列表末尾添加新通知，它工作正常。删除通知也是如此，只有删除列表中的最后一个通知才能正常工作。我不明白为什么会这样，我似乎没有在任何地方使用列表索引。

reducer相关部分：

const INITIAL_STATE = {list: [], ...};    

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    ...
    case CREATE_NOTIFICATION:
      return { ...state, list: [...state.list, action.payload] };
    case DELETE_NOTIFICATION:
        return {
          ...state,
          list: state.list.filter(el => el.id !== action.id)
        };

谢谢。有什么想法吗？

为了让您更好地理解我所拥有的：

【问题讨论】：

标签： reactjs redux redux-form

【解决方案1】：

通过使用 initialize 由 redux-form 作为道具传递的动作创建器，设法让它工作。只需将其放在带有初始值的componentDidMount 中即可：

  componentDidMount() {
    this.props.initialize(this.props.initialValues);
  }

【讨论】：