ReactJS HREF 导致状态丢失 [英] ReactJS HREF Causes State Loss

问题描述

我有一个名为 EnrollForm 的父组件，带有一个 BrowserRouter，它路由到不同的子组件，这些子组件是我整个 EnrollForm 的页面.

每次填写子组件页面并单击下一个 btn 时，所有表单字段都会保存到子组件状态 obj，然后将该状态传递给父 EnrollForm 状态.这个流程工作正常..但是，当我将代码行添加到下一个子组件的 href 时，父 EnrollForm 状态被删除，BioForm 的状态也是如此.

非常感谢任何帮助，这可能很简单，但我已经研究了很长时间......

注册表格组件:

class EnrollForm extends Component {状态 = {}setParentFormState = (newStateObj, fromComponent) =>{this.setState({...this.state, ...newStateObj}, () => {console.log('从' + fromComponent 更新了 EnrollForm 组件状态);控制台日志(这个状态)；});}使成为() {返回 (<路由器><div className='workflow'><Route path='/enrollment-form/bio' render={(routeProps)=>(<BioForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/><Route path='/enrollment-form/citizenship' render={(routeProps)=>(<CitizenshipForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/><Route path='/enrollment-form/identity' render={(routeProps)=>(<IdentityForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/><Route path='/enrollment-form/attributes' render={(routeProps)=>(<AttributesForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/><Route path='/enrollment-form/address' render={(routeProps)=>(<AddressForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/><Route path='/enrollment-form/eligibility' render={(routeProps)=>(<EligibilityForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/><Route path='/enrollment-form/documents' render={(routeProps)=>(<DocumentsForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/><Route path='/enrollment-form/location' render={(routeProps)=>(<LocationForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/><Route path='/enrollment-form/appointment' render={(routeProps)=>(<ApptTimeForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/><Route path='/enrollment-form/status' render={(routeProps)=>(<StatusForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/>

</路由器>);}}导出默认的 EnrollForm；

BioForm 组件:

class BioForm 扩展组件 {状态 = {名字:空，中间名:空，姓氏:空，u_suffix: 空，u_gender:空，u_dob:空，u_lang: 空，u_email: 空，u_country_code_1:空，u_country_code_2:空，u_phone_1:空，u_phone_2:空，u_contact_method:空}nextButtonClicked = 事件 =>{let form = document.getElementById('applicant-form');让 formDataJsObj = FormFunctions.getJsObjFromFormData(form);让 keyToDelete = 'u_email[verify]';//这个字段从表单数据对象中移除，因为它没有在POST请求中发送FormFunctions.removeKeyFromFormObj(formDataJsObj, keyToDelete);控制台日志(formDataJsObj)；this.setState(formDataJsObj, () => {this.props.setParentFormState(this.state, this.constructor.name);console.log('BioForm 数据提交和父状态更新.. 改变页面.');window.location.href = '/enrollment-form/citizenship';});}渲染(){//标记}}

解决方案

这会导致页面重新加载，这会重置您的所有状态(包括 Redux)并再次渲染所有内容:

window.location.href = '/enrollment-form/citizenship';

替换为:

this.props.history.push('/enrollment-form/citizenship')

请注意，您可能需要像这样用 withRouter 包裹您的组件:

导出默认 withRouter(EnrollForm);

导入:

import { withRouter } from "react-router";

希望有帮助.快乐编码！

I have a parent component called EnrollForm with a BrowserRouter that routes to different sub-components which are the pages of my overall EnrollForm.

Each time a sub-component page is filled out and next btn is clicked, all form fields are saved to sub-component state obj, then that state is passed to the parent EnrollForm state. This flow is working correctly.. however when I added the line of code to href to the next sub-component, the parent EnrollForm state is deleted and so is BioForm's state.

Any help would be so greatly appreciated, It's probably simple but I've been looking at it for so long...

EnrollForm Component:

class EnrollForm extends Component {
    state = {

    }

    setParentFormState = (newStateObj, fromComponent) => {
        this.setState({...this.state, ...newStateObj}, () => {
            console.log('Updated EnrollForm component state from ' + fromComponent);
            console.log(this.state);
        });
    }

    render() {
        return (
            <Router>
                <div className='workflow'>
                    <Route path='/enrollment-form/bio' render={(routeProps)=>(<BioForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/>
                    <Route path='/enrollment-form/citizenship' render={(routeProps)=>(<CitizenshipForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/>
                    <Route path='/enrollment-form/identity' render={(routeProps)=>(<IdentityForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/>
                    <Route path='/enrollment-form/attributes' render={(routeProps)=>(<AttributesForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/>
                    <Route path='/enrollment-form/address' render={(routeProps)=>(<AddressForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/>
                    <Route path='/enrollment-form/eligibility' render={(routeProps)=>(<EligibilityForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/>
                    <Route path='/enrollment-form/documents' render={(routeProps)=>(<DocumentsForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/>
                    <Route path='/enrollment-form/location' render={(routeProps)=>(<LocationForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/>
                    <Route path='/enrollment-form/appointment' render={(routeProps)=>(<ApptTimeForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/>
                    <Route path='/enrollment-form/status' render={(routeProps)=>(<StatusForm {...routeProps} setParentFormState={this.setParentFormState}/>)}/>
                </div>
            </Router>
        );
    }
}

export default EnrollForm;

BioForm Component:

class BioForm extends Component {
    state = {
        first_name: null,
        middle_name: null,
        last_name: null,
        u_suffix: null,
        u_gender: null,
        u_dob: null,
        u_lang: null,
        u_email: null,
        u_country_code_1: null,
        u_country_code_2: null,
        u_phone_1: null,
        u_phone_2: null,
        u_contact_method: null

    }

    nextButtonClicked = event => {
        let form = document.getElementById('applicant-form');
        let formDataJsObj = FormFunctions.getJsObjFromFormData(form);
        let keyToDelete = 'u_email[verify]';
        //This field is removed from the form data object because it is not sent in the POST request
        FormFunctions.removeKeyFromFormObj(formDataJsObj, keyToDelete);
        console.log(formDataJsObj);
        this.setState(formDataJsObj, () => {
            this.props.setParentFormState(this.state, this.constructor.name);
            console.log('BioForm data submitted and parent state updated.. changing pages.');
            window.location.href = '/enrollment-form/citizenship';
        });



    }
    render(){//markup}
}

解决方案

This cause a page reload, which reset your all you states (Redux included) and render everything again:

window.location.href = '/enrollment-form/citizenship';

Replace it by:

this.props.history.push('/enrollment-form/citizenship')

Note that you might need to wrap your component with withRouter like this:

export default withRouter(EnrollForm);

With the import:

import { withRouter } from "react-router";

Hope it helps. Happy coding!

这篇关于ReactJS HREF 导致状态丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！