Reactjs POST後の要素のIDを取得する

Question

シンプルなフォームから取得したデータに基づいてデータベースにアイテムを作成したい。ユーザーがクリックした後、基本的にsubmitこの機能は、RANです：

createItem(item){ 
     this.state.bucket_list.push({ 
      name: item, 
      isCompleted: false 
     }); 
     this.setState({bucket_list: this.state.bucket_list}); 

     // POST to DB 
     fetch(url(this.props.api), { 
      method:"POST", 
      headers: { 
       'Accept': 'application/json', 
       'Content-Type': 'application/json', 
      }, 
      body: JSON.stringify({ 
       name: item, 
       isCompleted:false 
      }) 
     }); 

    } 

オブジェクトが正常に作成され、私は再レンダリングする原因になります状態を変更しています。ただし、オブジェクトのプロパティはnameとisCompletedに設定されています。 idもあり、データベースプロバイダが挿入した後に自動的に生成されます。このidは私のdeletes and updatesコールで必要なので重要です。だから、私はこれのようなものが必要です。また

createItem(item){ 
     // POST to DB first and get ID of newly created object 
     fetch(url(this.props.api), { 
      method:"POST", 
      headers: { 
       'Accept': 'application/json', 
       'Content-Type': 'application/json', 
      }, 
      body: JSON.stringify({ 
       name: item, 
       isCompleted:false 
      }) 
     }).then(function(data){ 
      id = data.id; // get ID 
      this.state.bucket_list.push({ 
       id: id, 
       name: item, 
       isCompleted: false 
      }); 
      this.setState({bucket_list: this.state.bucket_list}); 
     }); 

    } 

のNode.js（急行フレームワーク）で書かれた私のAPIコード：

.post(function (req, res) { 
    let item = new BucketList(); 
    item.name = req.body.name; 
    item.isCompleted = req.body.isCompleted ? req.body.isCompleted : false; 
    item.save(function (err) { 
     if (err) { 
      return res.send(err); 
     } 
     res.json({message:"Item Sucessfully Added", item}); 
    }); 
}) 

Answer 1

あなたはあなたの応答のトップレベルで、そのIDを探しているように見えます

が、あなたの応答メッセージと項目の2つのキーを持つオブジェクトです。アイテムの中に、あなたがIDを見つける必要があり、その変更：

id = data.id; // get ID 

へ：

id = data.item.id; // get ID 

そして、いっそのこと、あなたのようなものであることをプッシュ回線と一緒に完全にその行を置き換えることができます：

this.setState({bucket_list: [...this.state.bucket_list, data.item]}); 

この方法（これはあなたの「その後」ブロックの全体のコードです）、あなたはちょうど適切に設定するSETSTATEを使用している、あなたが状態を変更しているという事実のためにカバーし、その後、状態を変更していませんbucket_list t o古いバケットリストの内容に新しい項目を加えたもの。

もちろん、これは配列スプレッド演算子を使用しているため、使用しているjavascriptのバージョンであればそれを使用する必要があります。