的setState使用prevState失败

-1

toggleReply =() => { 
     this.setState(prevState => ({ reply: !prevState.reply })) 
    }

我知道我可以做this.setState({reply: !this.state.reply})，但上面的代码也将工作方法，但它并没有任何线索？

来源

2017-06-16 Alan Jenshen

什么没有用？有错误吗？ – Li357

@AndrewLi有错误。 –

它是什么* ...？ – Li357

您的setState按照docs的方式工作 - 请尝试下面的代码段。这是假设你正确定义了Component类，并且在构造过程中toggleReply处理程序绑定到this，或者您正在使用箭头函数来调用它。

class Thing extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.state = { reply: false }; 
 
     this.toggleReply = this.toggleReply.bind(this); 
 
    } 
 

 
    toggleReply() { 
 
     this.setState(prevState => ({ reply: !prevState.reply })) 
 
    } 
 

 
    render() { 
 
     return (
 
      <div> 
 
       <button onClick={this.toggleReply}>Toggle Reply</button> 
 
       <span>{` ${this.state.reply}`}</span> 
 
      </div> 
 
     ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Thing />, 
 
    document.getElementById('root') 
 
);

<script src=" https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script> 
 
<div id="root"></div>

来源

2017-06-16 16:52:29 Michael

你需要确保ES7类的属性已启用：

https://babeljs.io/docs/plugins/transform-class-properties/

那是什么让你使用内部进行适当的这个类的箭头功能绑定。否则，您必须使用其他答案所描述的常规功能手动绑定它。

来源

2017-06-16 17:11:29 cheesenthusiast

你不需要ES7 - ES6 arrow功能也将完成这项工作，例如''也可以在我上面的例子中工作，你可以从构造函数中删除绑定。 – Michael

确定你没有技术上的需要，但是我从发布的代码中假定他/他正在使用ES7类属性功能。 render（）中的手动绑定/箭头比较慢，我只是使用具有正确Babel配置的类属性，或者像在答案中那样在构造函数中绑定它。 – cheesenthusiast

的setState使用prevState失败

回答

相关问题