时间戳

首页 > 解决方案 > 为什么在异步调用的 React js 中刷新时不呈现数据？

reactjs - 为什么在异步调用的 React js 中刷新时不呈现数据？

问题描述

我正在创建编辑表单。首先我必须获取数据来编辑表单，我在componentDidMount()中调用它。请参见下面的代码。

import React from 'react';
import CompanyForm from './CompanyForm';
import { connect } from 'react-redux';
import { companyActions } from '../../../redux/actions/company-action';

class EditCompanyPage extends React.Component {
    constructor(props){
        super(props);
    };
    componentDidMount () {
        const { id } = this.props.match.params
        const { dispatch } = this.props;
        dispatch(companyActions.getCompany(id));
    }
    render(){
        const {editUser } = this.props;
        return(
            <div>
                <h1>Edit Company</h1>
                {
                    editUser && <CompanyForm handleActionParent={this.handleAction}  companyDataFP={editUser} />
                }   
            </div>
        );
    };
}
function mapStateToProps(state) {
    const { editUser } = state.companyReducer;

    return {
        editUser
    };
}

const EditCompany = connect(mapStateToProps)(EditCompanyPage);
export default EditCompany;

请参阅下面的 CompanyForm 组件的代码：

import React from 'react';


class CompanyForm extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            company :{
                name        : this.props.companyDataFP.name      || '',
                address1    : this.props.companyDataFP.address1  || '',
            }
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);

    };

    handleChange(e) {
        const { name, value } = e.target;
        const newState = Object.assign({}, this.state);
        newState.company[name] = value;
        this.setState(newState);
    }



    handleSubmit(e) {
        e.preventDefault();
        return false;
    }
    render(){

        return(
            <div className="col-md-12">
                <form onSubmit={this.handleSubmit}>
                    <div className="row">
                        <div className="col-md-6">
                            <div className='form-group'>
                                <label htmlFor="name">Name</label>
                                <input type="text" name="name" className="form-control" onChange={this.handleChange} value={this.state.company.name} />
                            </div>
                        </div>
                        <div className="col-md-6">
                            <div className='form-group'>
                                <label htmlFor="address1">Address 1</label>
                                <input type="text" name="address1" className="form-control" onChange={this.handleChange} value={this.state.company.address1} />
                            </div>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-md-12">
                            <div className='form-group'>
                                <input type="submit" className="btn btn-info" value="submit" />
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        );
    };
}

export default CompanyForm;

当我访问此表单时，它工作正常

<Link to="/edit-form/:id" >Edit</Link>

但是当我刷新当前页面时，值不会呈现为要编辑的表单。我正在使用 redux 方法进行状态管理，请指导我，我是新手。

标签： reactjsreact-redux

解决方案

可能会ComponyForm在其生命周期函数上初始化表单componentDidMount，所以当editUser到达时什么都不会改变。

一种处理方法正在改变：

<CompanyForm handleActionParent={this.handleAction}  companyDataFP={editUser}  />

至：

{editUser.name && <CompanyForm handleActionParent={this.handleAction}  companyDataFP={editUser}  />}

推荐阅读