TypeScript Redux React：如何遍历子组件

Question

我有一组通知作为我的 NotificationCenter 组件的道具。

当用户点击任何通知（或 "Mark All As Read" 按钮）时，它们应该被标记为 'isRead = true'，然后在 UI 上用另一种颜色重新呈现它.

我已经完成了所有操作（动作、事件等），但现在我需要触发 Reducer，以便可以重新呈现我的 Notifications 道具。

到目前为止，这是我的代码：

if (isType(action, ActionTypes.MarkNotificationsAsRead)) {
    return Object.assign({}, state, { 
        notifications: state.notifications.map(n => action.payload.<<HELP>>)
    } as INotificationCentreState);

"state.notifications" 是我的 Notification 道具，包含所有可用的通知。

"action.payload" 是包含我应该匹配然后修改为 'notification.isRead = true'.

的通知 ID 的字符串数组

我在这里遇到的主要问题是我无法改变我的通知列表，而且我不完全确定 .map() 是如何工作的。

谁能给我提示？我希望我的问题很清楚。

谢谢！

Answer 1

您可以切换 isRead 取决于当前通知的 id 是否在 action.payload

state.notifications.map(n => Object.assign({}, n, {isRead: action.payload.indexOf(n.id) > -1}))

TypeScript Redux React：如何遍历子组件

TypeScript Redux React: How to iterate through a component children

javascript

typescript

react-redux