React TypeError: this.setState 不是一个函数，尽管有绑定的处理程序答案

【问题标题】：React TypeError: this.setState is not a function despite having bound handlerReact TypeError: this.setState 不是一个函数，尽管有绑定的处理程序
【发布时间】：2018-06-17 02:36:07
【问题描述】：

在将其标记为 React this.setState is not a function 的副本之前，我已经看到并阅读了它。

我的问题是，即使我已经绑定了处理程序，我也会收到此错误消息。

class EditAccount extends Component {
    constructor(props) {
        super(props);
        this.onClick = this.onClick.bind(this);
    }

    state = {
        showForm: false
    }

    componentWillMount() {
        this.setState = {
            showForm: false
        }
    }

    render() {
        return (
            <div>
                <button onClick={this.onClick}>Edit</button>
                {this.state.showForm ? ( <Stuff/> ): null }
            </div>
        )
     }

    //toggle form visibility
    onClick(e) {
        const showing = this.state.showForm;
        if (showing) {
            this.setState({ showForm: false });
        } else {
            this.setState({ showForm: true });
        }
    }
}

有什么想法吗？

【问题讨论】：

标签： reactjs

【解决方案1】：

componentWillMount() 在挂载之前被调用。它在 render() 之前调用，因此在该方法中同步调用 setState() 不会触发额外的渲染。

在compomentWillMount 中不使用setState 的原因，

React 将使用构造函数的初始状态值或初始化的默认状态进行第一次渲染，而不是重新渲染。它不会等待 componentWillMount 异步完成 setState 调用。

所以，在componentWillMount 中调用 setState 是没有意义的。它只不过是在调用 setState 时什么都不做的状态处理程序处理。

【讨论】：

这是真的，它没有解决问题的问题。问题是setState 从一个函数变成了一个对象

【解决方案2】：

问题在于您的componentWillMount。您正在将 setState 更改为不再是一个函数，而是一个值为 showForm 的对象。你不应该像 react 建议的那样在 will mount 中设置状态。删除整个函数，代码将按预期运行。

意思是this.setState = { showForm: false } 将setState 更改为对象{ showForm: false } 而不是函数。所以是的，您的错误消息是正确的，因为 setState 不是函数

尝试删除整个 componentWillMount 函数

class EditAccount extends Component {
    constructor(props) {
        super(props);
        this.onClick = this.onClick.bind(this);
    }

    state = {
        showForm: false
    }

    render() {
        return (
            <div>
                <button onClick={this.onClick}>Edit</button>
                {this.state.showForm ? ( <Stuff/> ): null }
            </div>
        )
     }

    //toggle form visibility
    onClick(e) {
        const showing = this.state.showForm;
        if (showing) {
            this.setState({ showForm: false });
        } else {
            this.setState({ showForm: true });
        }
    }
}

一些优化.. 你应该能够稍微清理一下代码

class EditAccount extends Component {
    state = {
        showForm: false
    }
    render() {
        return (
            <div>
                <button onClick={this.handleClick }>Edit</button>
                {this.state.showForm ? <Stuff/> : null }
            </div>
        )
     }
    handleClick = (e) => {
        this.setState((old) => ({ showForm: !old.showForm }) )
    }
}

【讨论】：