setState 在这个例子中是如何工作的？答案

【问题标题】：How does setState work in this example?setState 在这个例子中是如何工作的？
【发布时间】：2017-11-26 07:09:00
【问题描述】：

我正在阅读React Native tutorial，我对TextInput 部分感到相当困惑：

<TextInput
    style={{height: 40}} 
    placeholder="Type here to translate!"
    onChangeText={(text) => this.setState({text})}
/>

我的理解：

我意识到 onChangeText={(txt) => this.setState({text: txt})} 有效，这对我来说很有意义，因为参数被应用于状态 text

我不明白的地方：

我不明白onChangeText={(text) => this.setState({text})} 的工作原理。为什么参数text必须和状态text命名相同？我知道它相当于onChangeText={(text) => this.setState({text: text})}，但我不明白为什么。如果参数只是被传递给状态变量，那么onChangeText={(txt) => this.setState({text})} 会起作用，但不会。

我尝试搜索答案并询问了多个人，但我还没有收到明确的解释。

【问题讨论】：

标签： javascript node.js react-native ecmascript-6

【解决方案1】：

如果我理解你的问题，你很难理解的是 es6 中的一个新特性，叫做 object literal property value shorthand。 https://ariya.io/2013/02/es6-and-object-literal-property-value-shorthand

【讨论】：

【解决方案2】：

您看到的是shorthand object properties，这是 ES2015 中的一个新功能。如果属性和值相同，则不需要提供值：

const obj = {
  foo
};

等同于：

const obj = {
  foo: foo
};

所以在这种情况下，它等价于（并且脱糖）：

(text) => this.setState({ text: text })

试了还是不行的原因：

(txt) => this.setState({ text })

是因为在第一个例子text中，属性的值是指箭头函数的参数：

(text) => this.setState({ text: text })
//                              ^^^^ refers to the argument `text`

在第二个 sn-p 中，text 是值，但是没有 text 变量，因为您将参数更改为 txt，因此它不起作用：

(txt) => this.setState({ text: text })
//                              ^^^^ refers to the argument `text` but it doesn't exist, it is called `txt`!

值必须与键相同。

【讨论】：

【解决方案3】：

此功能是来自 ES2015 (ES6) 的 Property shorthand。

【讨论】：

【解决方案4】：

this.setstate() 是一个函数。当您在构造函数this.state = {foo: bar} 中实例化状态对象时，您正在创建一个对象。因此，当您调用 this.setState() 时，您正在更新该对象。所以你的例子你可以这样写并得到相同的结果：

onChangeText={(txt) => this.setState({text: txt})}

要访问这个，你可以使用this.state.text

【讨论】：