Mise à jour de la variable de niveau fonction dans une requête d'extraction

Question

Je suis nouveau dans fetch et react.js et, fondamentalement, dans javascript, j'essaye de créer une nouvelle ligne dans une table et je récupère juste une ID (ensuite), le problème est que temp alors domaine est en train de changer, mais sa ne change pas en dehors d'elle, bien que je l'ai définie comme variable de niveau de fonction

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 

Answer 1

Résolu en séparant la demande d'extraction en une seule fonction, le problème était tel que mentionné ci-dessus la demande de récupération prend trop de temps, donc j'eu une autre fonction handleAddRow() d'attendre à l'aide de promesses

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; 
    }, 

Answer 2

il semble que le problème est que vous appelez console.log(temp) sans attendre les promesses précédentes pour terminer, c'est l'exécution n'est pas encore arrivée au point où vous affectez une valeur à la variable temp. Donc, la valeur de la variable temp change, mais cela arrive un certain temps après l'exécution de console.log(temp).

Si vous souhaitez utiliser la variable temporaire et qu'elle est remplie de manière asynchrone, vous devez y accéder dans les gestionnaires then correspondants.