Мой компонент получает profile и errors от родителя.В компоненте static getDerivedStateFromProps устанавливает новое состояние, если компонент получает новые данные от родителя.
...
constructor(props) {
super(props);
this.state = {
displaySocialInputs: false,
handle: '',
company: '',
website: '',
location: '',
status: '',
skills: '',
githubusername: '',
bio: '',
twitter: '',
facebook: '',
linkedin: '',
youtube: '',
instagram: '',
errors: {}
};
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
...
static getDerivedStateFromProps(nextProps) {
if (nextProps.errors) {
console.log('nextProps.errors:', nextProps.errors);
return { errors: nextProps.errors };
}
if (nextProps.profile.profile) {
const profile = nextProps.profile.profile;
// bring skills array back to csv
const skillsCsv = profile.skills.join(',');
// if a profile field wasn't provided set it to an empty string
profile.company = !isEmpty(profile.company) ? profile.company : '';
profile.website = !isEmpty(profile.website) ? profile.website : '';
profile.location = !isEmpty(profile.location) ? profile.location : '';
profile.githubusername = !isEmpty(profile.githubusername) ? profile.githubusername : '';
profile.bio = !isEmpty(profile.bio) ? profile.bio : '';
profile.social = !isEmpty(profile.social) ? profile.social : {};
profile.twitter = !isEmpty(profile.social.twitter) ? profile.social.twitter : '';
profile.facebook = !isEmpty(profile.social.facebook) ? profile.social.facebook : '';
profile.linkedin = !isEmpty(profile.social.linkedin) ? profile.social.linkedin : '';
profile.youtube = !isEmpty(profile.social.youtube) ? profile.social.youtube : '';
profile.instagram = !isEmpty(profile.social.instagram) ? profile.social.instagram : '';
// set component state
return {
handle: profile.handle,
company: profile.company,
website: profile.website,
location: profile.location,
status: profile.status,
skills: skillsCsv,
githubusername: profile.githubusername,
bio: profile.bio,
twitter: profile.twitter,
facebook: profile.facebook,
linkedin: profile.linkedin,
youtube: profile.youtube,
instagram: profile.instagram
};
}
return null;
}
Приведенный выше код предотвращает отображение объекта profile на странице.Когда часть
if (nextProps.errors) {
console.log('nextProps.errors:', nextProps.errors);
return { errors: nextProps.errors };
}
закомментирована, данные profile отображаются нормально, но данные errors не могут отображаться.
Как получить объект errors и profileдля отображения?При отправке моего компонента данные поля компонента отправляются родителю, поэтому, если все обязательные поля не пусты, не должно быть errors.
Полный репозиторий https://github.com/ElAnonimo/DevConnector/blob/master/client/src/components/common/ProfileForm.js
ОБНОВЛЕНИЕ 1
Родительский компонент EditProfile.
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
import ProfileForm from '../common/ProfileForm';
import { createProfile, getCurrentProfile } from '../../actions/profileActions';
class EditProfile extends Component {
constructor(props) {
super(props);
this.onSubmit = this.onSubmit.bind(this);
}
componentDidMount() {
this.props.getCurrentProfile();
}
onSubmit(profileData) {
this.props.createProfile(profileData, this.props.history);
}
render() {
return <ProfileForm profile={this.props.profile} errors={this.props.errors} onSubmit={this.onSubmit} />
}
}
EditProfile.propTypes = {
profile: PropTypes.object.isRequired,
errors: PropTypes.object.isRequired,
createProfile: PropTypes.func.isRequired,
getCurrentProfile: PropTypes.func.isRequired
};
const mapStateToProps = (state) => ({
profile: state.profile,
errors: state.errors
});
export default connect(mapStateToProps, { createProfile, getCurrentProfile })(withRouter(EditProfile));