Question

从React docs开始，我对使用setState感到困惑。见这个

 handleCelsiusChange(temperature) {
    this.setState({scale: 'c', temperature}); // no key
  }

其中state定义为

this.state = {temperature: '', scale: 'c'};

所以不是我在开始时所展示的，而是期待这样的电话：

 handleCelsiusChange(temperature) {
    this.setState({scale: 'c', temperature: temperature}); // with key
 }

我错过了什么？（显然有一些自动转换）。

PS。 temperature只是字符串而不是从子组件获取的对象，例如

 handleChange(e) {
    this.props.onTemperatureChange(e.target.value);
  }

Answer 1

这只是语法糖。

{scale: 'c', temperature} // key -> "temperature", value -> temperature

是

的简写

{scale: 'c', temperature: temperature} // key and value explicitly defined

这可以在MDN上找到（ECMAScript 2015中的新标记）。

Answer 2

使用es6，您可以像第一个示例中那样通过变量定义对象属性（简写属性名称）。

因此，您的第一个示例中的temperature将成为关键，而变量所持有的值将是，即好的值。

更多信息on mdn

var a = 'foo', b = 42, c = {};
var o = {a, b, c};
console.log(o.a) // foo

Answer 3

您所看到的是ES6的一项功能，称为Object Literal Shorthand。

你写的内容也是100％正确的：

  this.setState({scale: 'c', temperature: temperature}); // with key

仅当键和值被命名为相同的示例时才会起作用：

this.setState({name, color}); Will equal
this.setState({name:name, color:color});