更新数组中对象的字段

Question

我目前使用

im结合使用react redux来处理我的通知逻辑。我要执行的行为是每当有人单击列表中的一个对象时，我都会获取该ID，将其发送到我的后端，然后更改字段is_read = True。但是，与其重新调用api以再次获取我的所有通知，只是为了表明该对象已被读取，我希望在操作返回成功后从数组中找到该对象并更改其字段is_read=True

这里有一些代码：

数据架构

notifications: [{
                 id(pin):1,
                 title(pin):"no title available...",
                 datetime(pin):"2020-06-12T10:33:27.173774Z",
                 is_read = false,
                },
                 {
                 id(pin):2,
                 title(pin):"no title available...",
                 datetime(pin):"2020-06-12T10:33:27.173774Z",
                 is_read = false,
                },

],

Saga：

//I have 2 functions here , one is to handle 1 click , the 2nd is to handle a 'clear all' button

export function* workerReadNotification(action) {
yield put({ type: 'SHOW_LOADER_COMPONENT', loading: 'notifications' })
const data = yield call(() => axiosInstance.get(`/notifications/${notification_id}`))
yield put({ type: "UPDATE_NOTIFICATION_DATA", payload: data.data })
yield put({ type: 'HIDE_LOADER_COMPONENT', loading: 'notifications' })
if (action.message) {
    yield put({ type: "CREATE_MESSAGE", message: action.message })
}
}

export function* workerReadAllNotification(action) {
    yield put({ type: 'SHOW_LOADER_COMPONENT', loading: 'notifications' })
    const data = yield call(() => axiosInstance.post(`/notifications/readall/`,action.data))
    yield put({ type: "UPDATE_NOTIFICATION_DATA", payload: data.data })
    yield put({ type: 'HIDE_LOADER_COMPONENT', loading: 'notifications' })
    if (action.message) {
        yield put({ type: "CREATE_MESSAGE", message: action.message })
    }
}

减速器：

const updateNotificationData = (state, action) => {
return updateObject(state, {
    //logic here to replace the fields
    });
}

我的问题是，进行这两次更新操作的最佳方法是什么？

Answer 1

您可以通过传递需要更新的对象的ID来使用以下实用程序方法。

let notifications = [{
                 "id(pin)":1,
                 "title(pin)":"no title available...",
                 "datetime(pin)":"2020-06-12T10:33:27.173774Z",
                 is_read: false,
                },
                 {
                 "id(pin)":2,
                 "title(pin)":"no title available...",
                 "datetime(pin)":"2020-06-12T10:33:27.173774Z",
                 is_read: false,
                },

];

const updateObject = (data, id) => {
  return data.map(d => {
    if(id === d["id(pin)"]) {
      return {
        ...d,
        is_read: true
      }
    } else return {...d}
  })
}

console.log(updateObject(notifications, 1))

如果您想一次更新多个对象，则可以使用以下方法

let notifications = [{
                 "id(pin)":1,
                 "title(pin)":"no title available...",
                 "datetime(pin)":"2020-06-12T10:33:27.173774Z",
                 is_read: false,
                },
                 {
                 "id(pin)":2,
                 "title(pin)":"no title available...",
                 "datetime(pin)":"2020-06-12T10:33:27.173774Z",
                 is_read: false,
                },
                 {
                 "id(pin)":3,
                 "title(pin)":"no title available...",
                 "datetime(pin)":"2020-06-12T10:33:27.173774Z",
                 is_read: false,
                }

];

const updateObjectByIds = (data, idArray) => {
  return data.map(d => {
    if(idArray.includes(d["id(pin)"])) {
      return {
        ...d,
        is_read: true
      }
    } else return {...d}
  })
}

console.log(updateObjectByIds(notifications, [1, 2]))

希望这会有所帮助。