Состояние реакции: обновить индекс объектов массива без явного указания ключей

Question

У меня есть массив объектов в моем состоянии.Я хочу обновить последний объект в массиве.Но я не хочу явно упоминать ключи при обновлении объекта.

Вот так выглядит мой код прямо сейчас.

import React from 'react'
import update from 'immutability-helper'

class Container extends React.Component {
  state = { queue: [
    {title: 'title 1', message: 'message 1', dismissible: false},
    {title: 'title 2', message: 'message 2', dismissible: true},
    {title: 'title 3', message: 'message 3', dismissible: false},
  ] }
  updateLast = (contents) => {
    this.setState({
      queue: update(this.state.queue, {
        [this.state.queue.length-1]: {
          title: {$set: contents.title},
          message: {$set: contents.message},
          dismissible: {$set: contents.dismissible},
        },
      }),
    })
  }

  render() {
    return (
      <div className="notifications">
        {this.state.queue.map((notification, key) => (
          <Notification key={key} {...notification} />
        ))}
      </div>
    )
  }

Как вы можете видеть, в updateметод Я явно указываю ключи объекта title, message и т. д.Можно ли как-то обновить все ключи объекта с помощью оператора map или spread ...?

Answer 1

Если объект contents имеет ту же форму, что и элементы в вашем массиве, вы, вероятно, можете добавить объект напрямую.Вы можете удалить последний индекс с помощью .slice(0, -1), а затем использовать .concat, чтобы добавить новый элемент в конец.Также, чтобы убедиться, что вы используете форму обратного вызова setState, и всегда делайте это, когда новое состояние каким-то образом зависит от предыдущего.

this.setState((state) => ({
  queue: state.queue.slice(0, -1).concat(contents),
}))

Здесь также работает распространение массива.

this.setState((state) => ({
  queue: [...state.queue.slice(0, -1), contents],
}))

Answer 2

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

updateLast = (contents) => {
  this.setState({
    queue: [...this.state.queue.slice(0, -1), {
      title: {$set: contents.title},
      message: {$set: contents.message},
      dismissible: {$set: contents.dismissible},
    }],
  })
}