React状態のオブジェクトを更新する方法

Question

私はusersのインデックス付きリストを（配列ではなく）JSオブジェクトに持っています。それは、リアクト州の一部です。 IDを持つ（4）キーとして

は、ID 2でユーザーを削除{ "ジェーン"：名前は、4 ID}

1. 新しいユーザーを追加します。

   { 
       1: { id: 1, name: "John" } 
       2: { id: 2, name: "Jim" } 
       3: { id: 3, name: "James" } 
   } 
   

   へのベストプラクティスは何ですか

2. 任意の不変のヘルパーなし "ピーター"

に変更し、ユーザ＃2の名前を。私はCoffeescriptとUnderscoreを使用しています（だから_.extendは大丈夫です...）。

ありがとうございました。

Answer 1

これは私が

• アドオンどうなるのかです：あなたは、あなたにフラックスを使用していない場合var newUsers = _.extend({}, users)その後、newUsers['2'].name = 'Peter'

Answer 2

：var newUsers = _.extend({}, users, { 4: { id: 4, ... } })

削除：var newUsers = _.extend({}, users)その後、delete newUsers['2']

変更をthis.setState（）を使用して状態オブジェクトを更新します。

delUser(id) { 
    const users = this.state.users; 
    delete users[id]; 
    this.setState(users); 
} 

addChangeUser(id, name) { 
    const users = this.state.users; 
    users[id] = {id: id, name: name}; 
    this.setState(users); 
} 

次に、あなたはこれでテストケースを実行することができます。

addChangeUser(4, 'Jane); 
addChangeUser(2, 'Peter'); 
delUser(2); 

Answer 3

setStateはまた、あなたがこれらの機能は、お使いのstateオブジェクトと仮定し、より直感的

function add(user) { 
    this.setState(users => { 
    users[ user.id ] = user 
    return users 
    } 
} 

function remove(id) { 
    this.setState(users => { 
    delete users[ id ] 
    return users 
} 

を見つけるかもしれない機能を、受け入れはusersオブジェクトです（実際には）。の場合、usersを選択する必要があります。setStateに関数を渡すと、実際のstateオブジェクトを渡すと常に呼び出されます。

この例では、addを使用して、実際の使用状況に応じて別のヘルパーを作成することもできます。

Answer 4

別に_.extendから、あなたはこれが正しい答えであるuser

let user = new Map(); 
user.set(4, { id: 4, name: "Jane" }); //adds with id (4) as key 
user.myMap.set(2, { id: 2, name: "Peter" }); // set user #2 to "Peter" 
user.delete(3); //deletes user with id 3