不明白 JavaScript 赋值运算符如何与函数交互答案

【问题标题】：Don't understand how JavaScript assign operator interacts with a function不明白 JavaScript 赋值运算符如何与函数交互
【发布时间】：2020-02-13 07:56:48
【问题描述】：

我的问题是我不明白如何解释分配运算符并与函数交互。让我解释一下

我正在更改我的组件的状态，当然，我做错了什么，直到我意识到这一点才发现。

我的组件：

class UpdateLifeCycle extends Component {
  state = { src: urls[this.props.election] };

  componentWillReceiveProps(nextProps) {    
    this.setState = { src: urls[nextProps.election] };    
  }

  render() {
    return (
      <div>
        <p>Selected {this.props.election}</p>        
        <img //
          alt={this.props.election}
          src={this.state.src}
          witdh="250"
        />
        <p>{urls[this.props.election]}</p>
        <p>{this.state.src}</p>
      </div>
    );
  }
}

我在做什么，错的是这件作品

this.setState = { src: urls[nextProps.election] };

我应该做的是将它作为参数传递而不是分配它。

this.setState({ src: urls[nextProps.election] });

为什么JS解释器允许你给一个函数赋值和对象，那个对象是在哪里被赋值的？

【问题讨论】：

因为函数和其他函数一样只是一个道具，所以对象被分配给组件实例的 setState 道具。

标签： javascript reactjs assign

【解决方案1】：

TL;DR

setState 是一个变量，目前持有function。没有什么能阻止你改变它的值并在那里添加一个对象，因为它是一个变量。 JavaScript 受到其他函数式编程语言的影响，可以将函数分配给变量。

说明

state 是 React 组件中的一个特殊对象，您可以使用 this.state 访问它。 setState 是 React 组件中的一个特殊函数，它允许你修改状态。当状态更新时会调度操作，但是您不应直接修改 React 组件的状态，并且应始终使用 setState。

setState 是 JavaScript class 中的另一个变量（您的 React 组件是基于类的组件），它默认包含修改 state 变量的函数。您可以覆盖 JavaScript 中的变量，当您将对象（您想要的新状态）分配给 setState 时，您正在更改 setState 的值，现在无法再更新 state 变量。

你会发现 React 的 docs 很有帮助。

【讨论】：