[=第 10 种形式后初始形式值被丢弃
Inititial form values get discarded after adding/removing the form
我有一个 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)
};
谢谢。有什么想法吗?
为了让您更好地了解我所拥有的:
通过使用由 redux-form
作为道具传递的 initialize
动作创建器设法让它工作。只需将其放入具有初始值的 componentDidMount
中:
componentDidMount() {
this.props.initialize(this.props.initialValues);
}
我有一个 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)
};
谢谢。有什么想法吗?
为了让您更好地了解我所拥有的:
通过使用由 redux-form
作为道具传递的 initialize
动作创建器设法让它工作。只需将其放入具有初始值的 componentDidMount
中:
componentDidMount() {
this.props.initialize(this.props.initialValues);
}