Получить новый объект, добавленный в массив в JavaScript после componentDidUpdate

Question

Как я могу получить новый объект, добавленный в массив после componentDidUpdate?

У меня есть эти два объекта в prevProps:

objArray1 = [
    {
        "id": 1,
        "name": "abc",
    },
    {
        "id": 2,
        "name": "def",
    }
]

, и я получаю эти три объекта в this.props

objArray2 = [
    {
        "id": 1,
        "name": "abc",
    },
    {
        "id": 2,
        "name": "def",
    },
    {
        "id": 3,
        "name": "ghi",
    }
]

и я хочу добраться до объекта, который изменился

newObject ={
            "id": 3,
            "name": "ghi",
        }

, чтобы я мог передать его другой функции

Answer 1

Создайте набор значений id из prevProps с Array.map() и отфильтруйте новый props с id, который существует в наборе:

const prevProps = [{"id":1,"name":"abc"},{"id":2,"name":"def"}]
const props = [{"id":1,"name":"abc"},{"id":2,"name":"def"},{"id":3,"name":"ghi"}]

const prevSet = new Set(prevProps.map(o => o.id))

const added = props.filter(o => !prevSet.has(o.id))

console.log(added)

Если новые элементы всегда добавляются в конец массива , вы можете использовать Array.slice() для удаления предыдущих элементов (длина `prevProps) и получите новые предметы:

const prevProps = [{"id":1,"name":"abc"},{"id":2,"name":"def"}]
const props = [{"id":1,"name":"abc"},{"id":2,"name":"def"},{"id":3,"name":"ghi"}]

const added = props.slice(prevProps.length)

console.log(added)

Answer 2

Вы можете фильтровать objArray2 с идентификатором

 objArray2.filter(ele=> !objArray1.some(value=> value.id === ele.id) )

Если после предыдущего объекта всегда добавляются дополнительные элементы, вы можете нарезать

   objArray2.slice(objArray1.length,)

Answer 3

, если идентификаторы увеличиваются на единицу каждый раз, когда они добавляются. Затем вы можете сохранить последний идентификатор и проверить наличие новых при обновлении.