根据
React Docs,我们可以通过两种方式使用对象语法的setState和其他具有如下所示功能的方法
this.setState((prevState,props) => ({
counter: prevState.counter + props.increment
}));
我对箭头函数语法的理解就像()=> {}其中在箭头=>之后遵循花括号,但根据样本,它是圆括号而不是花括号
这些语法()=> {}和()=>({})之间有什么区别.
在handleClick函数中使用this.setStage(prevStage =>({}))语法时,根据文档尝试示例代码,如果将其更改为this.setState(prevStage => {}),则不会切换按钮值.
以下是工作代码：
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {
isToggleOn : true
}
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<div>
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : "OFF"}
</button>
</div>
);
}
}
解决方法
后来我提到了
MDN并在高级语法部分下找到了详细信息,如果你想隐式返回对象,那么我们需要将它包含在()中,这回答了我的问题.
// Parenthesize the body of function to return an object literal expression:
params => ({foo: bar})
