反应：更新状态变量速记

Question

在React中，为了处理变量更改，我们这样做：

handleChangeRound = (round) => {
  this.setState({round: round});
}

updateLoading = (isLoading) => {
  this.setState({isLoading: isLoading});
}

有没有办法写

this.setState({round: round});
this.setState({isLoading: isLoading});

为

this.updateState(round);
this.updateState(isLoading);

给定变量round和isLoading处于状态并与变量名称相对应，以避免多余的variable: variable？

---

PS：受启发：

console.log({x: x, y: y});
// output:
// {x: 10, y:20}

可以写为

console.log({x,y});
// output:
// {x: 10, y:20}

Answer 1

您可以将其写为

var FieldIWantToUse = selectedItemsDetails.ShortDescription

使用ECMAScript 6 / ES2015中的对象属性速记。基本上，这背后的想法是，由于变量声明具有键，因此您可以省略属性键。

Property definitions

Answer 2

您需要做的就是用动态obj编写setState并将对象传递给类似的函数

this.updateState({ round });
this.updateState({ isLoading });

updateState = (obj) => {
   this.setState(obj)
}

Sample Demo

Answer 3

您可以将setState与回叫一起使用

this.setState(prevState => {
 return {
   isLoading:!prevState.isLoading
 }
})

或者您可以通过prevState做任何事情