0
マップ全体を：が反応再レンダリングするたびに1子の更新言い換え
私はFormElementsとの配列を持っています。それらのうちの1つが変更されるたびに、私は更新を親フォームに送信します。このフォームは、formDataの状態を更新します。
フォームのマップがすべての子を再レンダリングするという問題があります。私が必要とするのは、更新されたFormElementだけをレンダリングすることです。
これは、マウント時にデータベースからすべての値を取得する必要がある、パフォーマンス上の問題を引き起こします（espciallyドロップダウン）。
あり多くのコードがありますので、私がしようとすると下ののrelaventのものを出してあげる：
フォームページ：
handleFormElementChange(id, value) {
var frm = this.state.formData;
var index=-1;
for(var i=0;i<frm.length;i++) {
if(frm[i].id==id) {
index=i;
break;
}
}
frm[index].value = value;
this.setState({formData: frm, selectedElementId: id});
}
レンダリング：（これは再レンダリング、問題となっていますすべての子供たち）
const FormElements = ({formFields}) => (<div> {
formFields.map(formField => (<FormElement name={formField.name} key={(formField.id != undefined) ? formField.id : "1"} editable={formField.editable} selected={this.state.selectedElementId} value={formField.value} id={formField.id} type={formField.fieldType} handleChange={this.handleFormElementChange.bind(this)}/>)
)} </div>);
FormElementページ：
componentWillMount() {
if(this.props.type == this.state.fieldTypesEnum.DROPDOWN) {
var self = this;
this.getDropdownVals(this.props.id, function(callback) {
self.setState({
dropdownVals: callback
});
});
}
}
onChange(e) {
this.props.handleChange(e.target.id, e.target.value);
}
レンダリング：
if(this.props.type == this.state.fieldTypesEnum.DROPDOWN) {
var self = this;
var MakeItem = function(item) {
return <option key={(item.ID != undefined) ? item.ID : "1"} value={item.ID}>{item.value}</option>;
};
let data = this.state.dropdownVals;
return (<div class="form-group">
<label for={this.props.id}>{this.props.name}:</label>
<select name={this.props.id} type={this.props.type} maxLength="20" class="form-control" disabled={!this.props.editable} id={this.props.id} value={this.state.isChecked} onChange={this.onChange} ref={(input) => { this.nameInput = input; }}>
{data.map(MakeItem)}
</select>
handleChangeメソッドを非常に速く起動させたくない場合は、 'debounce'メソッドをここに適用できます。ここには[参照]（https://css-tricks.com/the-difference-between-throttling-and-debouncing/） –
興味深い！フィールドが変更されるたびにドロップダウンが点滅して再投入されるため、まだ理想的ではありません – Wayneio
フォームの値に応じてデータベースからデータを取り出す方法、または両方が別の方法ですか？ –