Блог

У меня есть 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 , которое хранится в redux, оно будет добавлено, но все начальные значения в моих формах также будут отброшены. Если я добавлю новое уведомление в конец списка, оно будет работать нормально. То же самое касается удаления уведомлений, оно работает нормально, только если вы удалите последнее в списке. Я не понимаю, почему это происходит, я, кажется, нигде не использую индекс списка.

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

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

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

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

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

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