Question

在将此标记为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 });
        }
    }
}

有什么想法吗？

Answer 1

问题出在componentWillMount。您正在将setState更改为不再是函数，而是将值更改为showForm。你不应该在will mount中设置state作为反应建议。删除整个函数和代码将按预期工作。

意味着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 }) )
    }
}

Answer 2

在安装发生之前调用
componentWillMount（）。它在render（）之前调用，因此在此方法中同步调用setState（）不会触发额外的渲染。

不在setState内使用compomentWillMount的原因，

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

因此，在componentWillMount内进行setState调用没有意义。它只不过是在调用setState时什么也不做的状态处理程序处理。

React TypeError：尽管有绑定处理程序，this.setState也不是函数

2 个答案: