React 中的 setState 在这种情况下如何工作？答案

【问题标题】：How does setState in React work in this scenario?React 中的 setState 在这种情况下如何工作？
【发布时间】：2019-01-13 20:59:11
【问题描述】：

我正在尝试在我的数组中设置对象的状态。我做到了，但我不明白。

toggleVisited = countryCode => {
  var countries = [ ...this.state.countries ];
  var countryToChange = countries.find(country => country.code === countryCode);
  countryToChange.visited = !countryToChange.visited;
  this.setState({ countryToChange });
}

我（主要）了解正在发生的事情，直到最后一行 this.setState。

我将代码更改为this.setState({})，它仍然有效。我一直认为设置状态是为对象键设置新值。为什么（不管我在这里放什么），它仍然设置正确吗？

【问题讨论】：

这很奇怪......
@PraveenKumarPurushothaman 如果他们的组件不是纯的，那就不是

标签： javascript reactjs setstate

【解决方案1】：

使用countryToChange.visited = !countryToChange.visited，您正在改变您当前的状态。 Don't do this. 改为创建一个新对象：

toggleVisited = countryCode => {
    this.setState(prevState => {
        const countries = prevState.countries.map(country => country.code !== countryCode
            ? country
            : {
                ...country,
                visited: !country.visited
            })
        const countryToChange = countries.find(country => country.code === countryCode)

        return {
            countries,
            countryToChange
        }
    })
}

【讨论】：

请注意，您还可以将函数传递给setState，它将接收当前状态作为参数。所以类似于this.setState(prevState => { var countryToChange = prevState.countries...
@HalilC 很好。我改变了它。我也错过了 OP 可能也想更改 countries。所以我添加了一个map 来说明这一点。

【解决方案2】：

React 组件的状态应该被视为不可变的，但您实际上可以更改它的值。您的代码将适用于您执行的每个 setState()，因为 setState 会触发重新渲染，并且由于您已经更改了状态 countryToChange.visited = !countryToChange.visited;，组件将使用新状态重新渲染。

【讨论】：

【解决方案3】：

toggleVisited = countryCode => {
  var countries = [ ...this.state.countries ];
  //here you use spread operator to "clone" all countries
  var countryToChange = countries.find(country => country.code === countryCode);
  //you filter all your countries and get the one with the CC you want
  countryToChange.visited = !countryToChange.visited;
  //your country is an object, and you change visited prop to it's opposite
  //boolean, !false == true
  this.setState({ countryToChange });
  //you just changed your country visited prop, in react you cannot change
  //deep props so, you re-set {countryToChange: countryToChange}
  //or simply {countryToChange} due to new ES features
}

【讨论】：