Question

我很新来做出反应，在我的组件之一中，我有以下内容：

checkNav() {
        if (this.state.step === 0) {
            this.setState({ nextEnabled: this.state.agreementAccepted });
        } else if (this.state.step === 1) {
            this.setState({ nextEnabled: this.state.privacyPolicyAccepted });
        }
    }

    render() {
>173        checkNav();

        return (
            <div className="first-login-form-content">
                <div className="label">Initial Login Wizard</div>
                {this.initialLoginWizard()}
                <div className="navButtons">
                    <button disabled={!this.state.backEnabled} onClick={this.handleBack}>Back</button>
                    <button disabled={!this.state.nextEnabled} onClick={this.handleNext}>Next</button>
                    <button className="acceptBtn" disabled={!this.state.acceptEnabled} onClick={this.handleAccept}>Accept</button>
                </div>
            </div>
        );
    }

但这会对我产生以下错误：

无法编译./src/components/Login.js行173：“ checkNav”为   未定义no-undef

搜索关键字以详细了解每个错误。

我需要怎么做才能在调用此函数之前声明它？

Answer 1

如果要运行class实例的方法，则需要通过this关键字来访问它：

this.checkNav()

话虽如此，您正在setState方法内调用render，这可能会导致无限循环。尝试将其移至其他生命周期方法（componentDidUpdate？）

按照docs：

render（）函数应该是纯函数，这意味着它不会修改组件状态，每次调用时都返回相同的结果，并且不与浏览器直接交互。

如果需要与浏览器进行交互，请改为使用componentDidMount（）或其他生命周期方法执行工作。保持render（）的纯净性使组件更容易考虑。

React无法编译/未定义功能

1 个答案: