Начальные значения формы удаляются после добавления / удаления формы - PullRequest
0 голосов
/ 09 апреля 2019

У меня есть компонент 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);

Работает.Но если я попытаюсь добавить новую информацию в верхнюю часть notifications.list, которая хранится в избыточном, она добавляется, но все начальные значения в моих формах также отбрасываются.Если я добавлю новое уведомление в конец списка, он будет работать нормально.То же самое касается удаления уведомлений, оно работает нормально только в том случае, если вы удалили последнее в списке.Я не понимаю, почему это происходит, я, кажется, нигде не использую индекс списка.

Соответствующая часть редуктора:

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)
        };

Спасибо.Есть идеи?

Чтобы вы лучше поняли, что у меня есть: enter image description here

1 Ответ

1 голос
/ 09 апреля 2019

Удалось заставить его работать с помощью initialize создателя действий, который передается в качестве опоры redux-form.Просто поместите его в componentDidMount с начальными значениями:

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