2017-07-26 51 views
0

我是新來抓取和react.js和基本上JavaScript,我試圖在表中創建一個新行,只是得到一個ID回(當時第二),問題是,溫度在當時的領域正在發生變化,但其不改變外面雖然我把它定義爲功能級可變在獲取請求中更新函數級別變量

handleAddRow({ newRowIndex }) { 
     var temp = null; 

     /////////////////////////////////////// updating records in db 
     fetch(`${config.serverUrl}/criteriaAPI`, 
     { 
      method: "POST", 
      dataType: 'json', 
      headers: { 
        'Accept': 'application/json; charset=UTF-8', 
        'Content-Type': 'application/json; charset=UTF-8' 
       } 
     }) 
     .then(function(res){ return res.json(); }) 
     .then(function(data){ temp = data._id ;alert(temp)}) 
     ////////////////////////////////////// 
     console.log(temp); 
     const newRow = { 
      _id: temp, 
      criteria_id: '', 
      securityCriteria: '', 
      description: '', 
     }; 
     let rows = this.state.rows.slice(); 
     rows = update(rows, {$push: [newRow]}); 
    }, 



console.log(temp) = > null 
alert(temp) = > id key : id value 
+1

你需要它要從您的獲取調用的「headers」部分中刪除「Access-Control-Allow-Origin」:「*」,「Access-Control-Allow-Credentials」:true。這些是響應標題,所以如果你已經將這些添加到了請求中,因爲你收到了CORS錯誤,那不會解決問題。如果您遇到CORS錯誤,您應該使用https://stackoverflow.com/posts/45325697/edit編輯/更新您的答案,以包含您在瀏覽器devtools控制檯中看到的確切錯誤消息。 – sideshowbarker

+0

真的我刪除了兩行沒有什麼改變相對於我用來從node.js服務器獲取它的CORS錯誤,並且將它們添加到react.js提取請求中是錯誤的我猜想向下發佈的註釋是問題 – Ayman

回答

0

通過分離獲取請求到一個單一的功能解決了,問題是讀取請求如上所述正在採取太多的時間,所以我還有另外一個功能handleAddRow()等待使用承諾

addRow(){ 
     return fetch(`${config.serverUrl}/criteriaAPI`, 
     { 
      method: "POST", 
      dataType: 'json', 
      headers: { 
        'Accept': 'application/json; charset=UTF-8', 
        'Content-Type': 'application/json; charset=UTF-8', 
       } 
     }) 
      .then(response => { 
       return response.json() 
      }) 
      .catch(err => { 
       console.log("fetch error" + err); 
      }); 

    }, 


    handleAddRow({ newRowIndex }) { 
     this.addRow() 
      .then(data => { 
       let row = this.createSingleRow(data); 
       console.log(row); 
       let rows = this.state.rows.slice(); 
       rows = update(rows, {$push: row}); 
       console.log(rows); 
       this.setState({ rows }); 
      }); 
    }, 

    createSingleRow(data) { 
     console.log('Entered into createRows'); 
     let temp = []; 
     temp.push({ 
       _id: data._id, 
       criteria_id: data.criteria_id, 
       securityCriteria: data.securityCriteria, 
       description: data.description 
      }); 

     //console.log(temp); 
     return temp; 
    }, 
2

它看起來像問題是,你無需等待前一個承諾完成呼叫console.log(temp),即執行尚未達到您將值分配給臨時變量的程度。所以臨時變量的值確實會發生變化 - 但它會在console.log(temp)執行後發生一段時間。

如果要使用臨時變量並以異步方式填充,則必須在相應的then處理程序中訪問它。

+0

I雖然關於這個問題,但問題是我不能訪問'.then'域中的'this.state.rows',因爲它們在響應初始狀態 – Ayman

+0

中定義,你認爲有一種方法可以在內部實現回調函數然後? – Ayman

+1

保持'this'的上下文是一個已知的「問題」,有多種方法來解決它,檢查這個問題:https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-裏面-A-回調 – Amid