从后端重新更新表单字段

Question

我正在使用React和Redux开发一个项目，我需要在表单中更新后端的数据。由于需要更新的数据将从后端获取，我将从props初始化组件状态，并将从组件状态分配表单值。我遇到的问题是，我从后端获取的一些值最初是空的（未定义），需要从表单中添加，并且在呈现组件时抛出错误。请参考下面的React类，如果道具值未定义，如何避免组件抛出错误的任何建议都会被赞赏。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import Radium from 'radium';

import ProfileBio from '../common/commonProfileBio';

const form =  reduxForm({
    form: 'profileEdit',
    fields: [ 'firstName', 'lastName', 'email', 'educations'],
    // validate
});

class ProfileBioList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editing: false,
            //this is throwing error since the values are undefined initially
            firstName: this.props.data.bio.firstName,
            lastName: this.props.data.bio.lastName,
            email: this.props.data.email
        };
        this.toggleEditing = this.toggleEditing.bind(this);
        this.handleUpdate = this.handleUpdate.bind(this);
        this.onChange = this.onChange.bind(this);
    }
    getStyles() {
        return {
            ulStyles: {
                listStyle: "none"
            },
            listItem: {
                borderRadius: 0,
                boxShadow: "1px 1px 1px lightgrey"
            }
        }
    }  
    handleUpdate(e) {
        e.preventDefault();
        this.props.updateProfile({bio:this.state});
    }
    renderItemOrEditField() {
        const styles = this.getStyles();
        if(this.state.editing !== true){
            return (
                <ProfileBio
                    toggleEditing={this.toggleEditing}
                    data={this.props.data}
                    styles={styles}/>
            );
        } else {
            return (
                <div className="row ">
                    <div className="col-xs-10 col-xs-offset-1">
                        <form>
                            <ul className="list-group-item" style={styles.ulStyles}>
                                <li >
                                    <label>First Name:</label>
                                    <input
                                        name="firstName"
                                        type="text"
                                        className="form-control"
                                        value={this.state.firstName}
                                        onChange={this.onChange}/>
                                </li>
                                <li className="">
                                    <label className="">Last Name:</label>
                                    <input
                                        name="lastName"
                                        type="text"
                                        className="form-control"
                                        value={this.state.lastName }
                                        onChange={this.onChange}/>
                                </li>
                                <li className="">
                                    <label>Email:</label>
                                    <input
                                        name="email"
                                        type="text"
                                        className="form-control"
                                        value={this.state.email}
                                        onChange={this.onChange}/>
                                </li><br />
                                <li className="btn-group">
                                    <button
                                        onClick={this.handleUpdate}
                                        action="submit"
                                        className="btn btn-primary">Update</button>
                                    <button
                                        onClick={this.toggleEditing}
                                        className="btn btn-default">Cancel</button>
                                </li>
                            </ul>
                        </form>
                    </div>
                </div>
            );
        }
    }
    toggleEditing(e){
        e.preventDefault();
        this.setState({editing: !this.state.editing});
    }
    render(){
        return (
            <div>
                {this.renderItemOrEditField()}
            </div>
        );
    }
}

export default connect(null)(form(ProfileBioList));

Answer 1

最简单的方法是使用默认值的ES6解构赋值。所以你的构造函数看起来像这样......

class ProfileBioList extends Component {
  constructor(props) {
    super(props);

    const {
      bio: {
        firstName = '',
        lastName = '',
      } = {},
      email = '',
    } = props.data;

    this.state = {
        editing: false,
        firstName: firstName,
        lastName: lastName,
        email: email
    };
    this.toggleEditing = this.toggleEditing.bind(this);
    this.handleUpdate = this.handleUpdate.bind(this);
    this.onChange = this.onChange.bind(this);
  }
  ...
}