Я создаю форму редактирования. Сначала мне нужно получить данные для редактирования формы, и я вызываю ее в 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, следует ли мне публиковать все имена файлов импорта? Я задаю вопрос общим термином, братан.
Какая именно информация не загружается при обновлении? Хранилище redux будет сброшено по умолчанию. Ваш URL-адрес должен оставаться решающим, поэтому значение «id» должно быть перенесено в componentDidMount. Что именно идет не так?
Я вызываю действие «companyActions.getCompany (id)» в componentDidMount, после этого я получил editUser prop из redux store, который я передаю дочернему компоненту, и он отлично работает с Link (Route), но при обновлении он сначала визуализировал дочерний компонент и отправлял editUser prop чтобы дочерний элемент был пустым, то получил свойство editUser с данными. @ twils0
@ hu7sy Я думаю, что при обновлении происходит нормальный процесс (компонент DID mount означает, что компонент уже смонтирован до вызова этого метода; хотя иногда он обновляется достаточно быстро, и вы не можете сказать). Вы говорите, что видите вспышку при обновлении с пустым editUser, и вы хотите избежать этой вспышки?





Вероятно, ComponyForm инициализирует форму в своей функции жизненного цикла componentDidMount, поэтому, когда появится editUser, ничего не изменится.
Способ справиться с этим меняется:
<CompanyForm handleActionParent = {this.handleAction} companyDataFP = {editUser} />
к:
{editUser.name && <CompanyForm handleActionParent = {this.handleAction} companyDataFP = {editUser} />}
Я уже пробовал, но это не сработало, пожалуйста, посмотрите код еще раз с вашим предложением.
Если в companyReducer вы определили editUser как {}, этот код не будет работать, потому что editUser не является неопределенным и проходит тот же поток, что и при отсутствии editUser &&, проверьте мой отредактированный ответ.
Возможно, вы установили Redux, но не используете его, по крайней мере, в опубликованном вами коде. Сложно сказать, что именно происходит из этого кадра.