У меня есть компонент 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)
};
Спасибо.Есть идеи?
Чтобы вы лучше поняли, что у меня есть: