通过getDerivedStateFromprops返回一个或两个对象

Question

我的组件从父级接收 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/src/commponents/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));

Answer 1

要返回两个数据，首先创建对象，然后在相应的if条件中添加键值，最后返回该对象。这样，它将执行两个if条件。

这样：

static getDerivedStateFromProps(nextProps) {
    let obj = {};
    if (nextProps.errors) {
        obj.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
        const temp = {
            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
        };
        obj = { ...obj, ...temp };
    }
    return obj;
}