0
フォームのバックエンドからデータを更新する必要がある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));