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

使用散布运算符，您可以分割数组中的最后一项，然后创建一个新对象来代替它，如下所示：

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

Answer 2

如果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],
}))

反应状态：无需明确指定键即可更新数组对象的索引

2 个答案: