奇怪的setState用法

Question

從反應docs，我後來使用setState感到困惑。 看到這個

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

如果狀態像

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 

是簡寫

​​

這可以在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的功能，稱爲對象文本的簡寫。

https://www.eventbrite.com/engineering/learning-es6-enhanced-object-literals/

你寫什麼也是100％正確：

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