javascript - 在这种情况下，React 中的 setState 是如何工作的？

Question

我正在尝试设置数组中对象的状态。我已经实现了，但我不明白。

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({}) 并且它仍然有效。我一直认为设置状态是为对象键设置新值。为什么(无论我在这里输入什么)，它仍然设置正确吗？

Answer 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
        }
    })
}