更新数组中对象的字段

Question

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

这是我的一些代码：

数据模式

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,
                },

],

传奇：

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

我的问题是，执行这 2 个更新操作的最佳方法是什么？

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]))

希望对您有所帮助。

更新数组中对象的字段

updating a field of an object in an array

javascript

reactjs

redux

redux-saga

数据模式

传奇：

减速器：