Почему данные не отображаются при обновлении в 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.handleChangeEvent = this.handleChangeEvent.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);

    };

    handleChangeEvent(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.handleChangeEvent} 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.handleChangeEvent} 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, но не используете его, по крайней мере, в опубликованном вами коде. Сложно сказать, что именно происходит из этого кадра.

Nedko Dimitrov 08.11.2018 14:18

Я упомянул, что использую redux, следует ли мне публиковать все имена файлов импорта? Я задаю вопрос общим термином, братан.

hu7sy 08.11.2018 14:22

Какая именно информация не загружается при обновлении? Хранилище redux будет сброшено по умолчанию. Ваш URL-адрес должен оставаться решающим, поэтому значение «id» должно быть перенесено в componentDidMount. Что именно идет не так?

twils0 08.11.2018 14:23

Я вызываю действие «companyActions.getCompany (id)» в componentDidMount, после этого я получил editUser prop из redux store, который я передаю дочернему компоненту, и он отлично работает с Link (Route), но при обновлении он сначала визуализировал дочерний компонент и отправлял editUser prop чтобы дочерний элемент был пустым, то получил свойство editUser с данными. @ twils0

hu7sy 08.11.2018 14:29

@ hu7sy Я думаю, что при обновлении происходит нормальный процесс (компонент DID mount означает, что компонент уже смонтирован до вызова этого метода; хотя иногда он обновляется достаточно быстро, и вы не можете сказать). Вы говорите, что видите вспышку при обновлении с пустым editUser, и вы хотите избежать этой вспышки?

twils0 09.11.2018 03:33
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
5
615
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вероятно, ComponyForm инициализирует форму в своей функции жизненного цикла componentDidMount, поэтому, когда появится editUser, ничего не изменится.

Способ справиться с этим меняется:

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

к:

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

Я уже пробовал, но это не сработало, пожалуйста, посмотрите код еще раз с вашим предложением.

hu7sy 08.11.2018 15:27

Если в companyReducer вы определили editUser как {}, этот код не будет работать, потому что editUser не является неопределенным и проходит тот же поток, что и при отсутствии editUser &&, проверьте мой отредактированный ответ.

StackedQ 08.11.2018 15:33

Другие вопросы по теме