Question

我正在尝试在React中构建一个多阶段表单。我构建了一个简单的演示来尝试浏览表单的功能。作为模板，我使用了在网上找到的this教程。我收到的错误消息是 Warning: Cannot update during an existing state transition (such as within "render"). Render methods should be a pure function of props and state. 在我单击继续按钮之后。

我浏览了多个具有相同错误消息的StackOverflow问题，但是没有一个问题可以帮助我解决问题。

MainForm

export class MainForm extends Component {
    state = {
        step: 1
    };

    nextStep = () => {
        const {step} = this.state;
        this.setState({
            step: step + 1
        });
    };

    prevStep = () => {
        const {step} = this.state;
        this.setState({
            step: step - 1
        });
    };

    render() {
        const {step} = this.state;

        switch (step) {
            case 1:
                return (
                    <PatientDetails
                        nextStep={this.nextStep}
                    />
                );
            case 2:
                return(
                    <Summary
                        prevStep={this.prevStep()}
                    />
                );
            default:
                return(
                    <h1>Something went wrong, kiddo</h1>
                );

        }
    }
}

export default MainForm

患者详细信息

export class PatientDetails extends Component {

    continue = e => {
        e.preventDefault();
        this.props.nextStep();
    };

    render() {
        return (
            <Form horizontal>
                <Button bsStyle="primary" onClick={this.continue}>Continue</Button>
            </Form>
        );
    }
}

export default PatientDetails;

摘要

export class Summary extends Component {

    back = e => {
        e.preventDefault();
        this.props.prevStep();
    };

    render() {
        return (
            <Form horizontal>
                <Button bsStyle="primary" onClick={this.back}>Continue</Button>
            </Form>
        );
    }
}

export default Summary;

Answer 1

如评论中所述，警告表明setState在render调用的中间被（无意地）调用。

查看您的代码，当您尝试将Summary组件作为传递给它的处理程序时会被发现是罪魁祸首，因为您编写了prevStep={this.prevStep()}。通过删除括号并写上prevStep={this.prevStep}，您的问题应该得到解决。

MultiStep表单-在现有状态转换错误期间无法更新

1 个答案: