时间戳

首页 > 解决方案 > ReactJS：更新嵌套状态对象属性而不使用 setState() 替换整个对象

javascript - ReactJS：更新嵌套状态对象属性而不使用 setState() 替换整个对象

问题描述

在我的组件状态中更改嵌套对象的多个属性值时，我正在尝试应用最佳实践。

我的组件代码目前如下所示：

class App extends Component {
  state = {
    object: {
      a: 10,
      b: 7,
      c: 12,
    }
  }
  render() {
    return (
      <div>
        <button onClick={this.setState({ object: { a: 5 }})}>change value a </button>
        <button onClick={this.setState({ object: { b: 2 }})}>change value b </button>
        <button onClick={this.setState({ object: { c: 3 }})}>change value c </button>
      </div>
      <p>{this.state.object.a}</p>
      <p>{this.state.object.b}</p>
      <p>{this.state.object.c}</p>
    );
  }
}

在单击任何按钮之前，您会在页面上看到三个按钮，后面是段落10阅读7和12。

一旦我单击第一个标记为“更改值 a”的按钮，值b和c在我的组件状态对象中被销毁，这只会导致5显示的值。如果我单击第二个按钮，那么只会2显示和支持a并且c消失了。

我理解这种行为，但是我想知道解决它的最佳方法。我想保留它，以便显示所有值，并能够在其他值保留时以任何顺序更新它们。

我也很确定我正在直接改变状态，我知道这是不好的做法。我只是不知道在这种情况下正确的做法。

标签： javascriptreactjs

解决方案

首先解决您所说的“我正在直接改变状态”。

自从您调用this.setState().

由于要更新 的特定部分object: {}，因此可以使用扩展语法或Object.assign()如下所示：

this.setState({ object: { ...this.state.object, a: 5 } })

或者

this.setState({ object: Object.assign({}, this.state.object, { a: 5 }) })

因为你打电话this.setState()，render你会得到Maximum call stack exceeded error。

我可以想到四种方法来解决这个问题，我将展示其中的两种。

  1. 将您的调用提取到类方法中，然后将引用传递给单击事件处理程序。
  2. 将此更改onClick={this.setState({ object: { c: 3 }})}为onClick={() => this.setState({ object: { c: 3 }})}

推荐阅读