1

でオブジェクトを更新するためにクリーンな方法私はこのようにフォーマットされたオブジェクトの配列を持っている:ここではJavascriptを - 配列

{ 
    "_id": "590cbcd9bf2b9b18ab3c3112", 
    "title": "", 
    "content": "Create Notes Webapp", 
    "checked": true, 
    "listID": "590cbc61bf2b9b18ab3c3110" 
}, 
{ 
    "_id": "590cfe5a86fe0908c560c2b0", 
    "title": "A Note 01", 
    "content": "My first note.", 
    "checked": false, 
    "listID": "590cbe15bf2b9b18ab3c3114" 
} 

が、私は、各項目を更新する必要があり、コードは次のとおりです。

onTextChange = (key, note, value) => { 
    clearTimeout(timeoutID); 
    switch (key) { 
     default: 
     break; 
     case 'title': 
     note.title = value; 
     break; 
     case 'checked': 
     note.checked = value; 
     break; 
     case 'content': 
     note.content = value; 
     break; 
    } 
    var notes = this.state.notes; 
    var id; 
    for (var i in notes) { 
     if (notes[i]._id === note._id) { 
     notes[i] = note; 
     id = i; 
     break; 
     } 
    } 
    this.setState({ notes },() => { timeoutID = setTimeout(() => this.updateNote(this.state.notes[id]), 3000); }); 

    } 

これが呼び出されます

onChange={(e, value) => this.onTextChange('title', note, value)} 

このswitch文を使用して指定された項目を更新するよりも良い方法はありますか?オブジェクト?また、idの配列をforループよりもスキャンする方が簡単ですか?

+0

なぜsettimeoutを使用しますか? setStateが終了した後でコードを実行したい場合は、 'setState({notes}、()=> {// your code}') – kurumkan

+0

実際に良い点です。私はsetStateコールバック – Timmo

答えて

1

オブジェクト内の指定されたアイテムを更新するために、そのswitchステートメントを使用してより良い方法はありますか?

あなたは音符のオブジェクトを更新するには、この構文を使用することができます。これにより、新しいプロパティをメモに挿入しないようにすることもできます。あなたはこれはそれが._idである渡されたものを置換する以外、現在の状態と同じですnewNotesの配列を作成します

var newNotes = this.state.notes.map(n => n._id === note._id ? note : n); 
this.setState({notes: newNotes}); 

を行うことができますノートを更新するために、クリーンな構文について

if (note.hasOwnProperty(key) { 
    note[key] = value 
} 

配列内のものと同じです。あなたは、もはやインデックスを保存していないが、あなたはおそらくノート変数を使用する可能性があるため

またupdateNoteコールを調整しなければならないでしょうか?

+0

または 'if(key in note)'にタイマーを設定するべきであることを忘れていました。 – trincot

1

の代わりに、スイッチ、あなたはこれを行うことができますが、あなたはそれがオブジェクト内に存在するかどうかを確認する必要があります。それはairbnbとGoogleなどの最も標準によって好まれるループとして

onTextChange = (key, note, value) => { 
clearTimeout(timeoutID); 
if(note[key]){ 
    note[key] = value; 
} 
var notes = this.state.notes; 
var id; 

}

。あなたがより良い方法をしたい場合 あなたは状況に応じて、オブジェクトの配列を使用して、いくつかのことを行うことができますし、ES5、ES6を使用している場合、しかし、あなたのオプションは次のとおりです。キーを持つオブジェクトへのオブジェクトの 1.メイク配列(プロパティ名前)をあなたのID(彼らは任意の文字列にすることができます)。 2. es6が使用されている場合、マップに変換することができ、必要なオブジェクトを取得するために非常に軽くて迅速になります。

希望するものがあります。 noveyakあなたはキーはプロパティの名前を(あなたは今それを持っているように)を含む文字列であるブラケットの構文を使用してJavaScriptでプロパティにアクセスすることができ、言ったのと同じように

1

。基本的に(あなたがプロパティの値としてIDを持つ別のオブジェクトでこれらのオブジェクトを格納することができ、あなたの2番目の質問について

note[key] = value; 

// if key is 'title', it will be the same as: 
note.title = value; 

// also the same as: 
note['title'] = value; 

、代わりの配列をループ:

Javascriptがオブジェクトのプロパティにアクセスするためのいくつかの異なる方法がありますそれを地図として使用する)。この方法で、あなたはidでメモのエントリに直接アクセスすることができます。たとえば:

allNotes = {}; // create a new object 
someNotes = { 
'title': '', 
'content': 'Create Notes Webapp', 
'checked': true, 
'listID': '590cbc61bf2b9b18ab3c3110' 
}; 
allNotes[idOfNote] = someNote; // where idOfNote holds the actual id of the note as a string 

あなたは、Mozillaの参照のウェブサイトhere上のJavascriptのプロパティアクセサについての詳細を読むことができます。

Javascriptには、オブジェクトの代わりに使用できる適切なマップもあります。このマップは、ES2015の使用が許可されている場合はより安全で高速です。あなたはそれについてhere(またMozillaのドキュメント)について学ぶことができます。