Question

下面的反应方法有什么问题

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

我知道我可以做this.setState({reply: !this.state.reply})但是上面的代码也可以使用，但它没有任何线索？

Answer 1

根据docs，您的setState有效 - 请尝试以下此代码段。这假设您正确定义了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>

Answer 2

您需要确保启用ES7类属性：

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

这就是允许你使用类中的箭头函数和正确的绑定。否则，您必须使用常规函数手动绑定它，如其他答案所述。

使用prevState的setState失败

2 个答案: