Remplissage de la base de données par récupération

Question

Vous essayez de remplir une base de données avec les données analysées à partir d'une requête de récupération, mais les options ne sont pas ajoutées. Je suis assez sûr que mon problème est que la page n'a pas été rendue à temps pour que l'élément soit trouvé, mais je ne sais pas comment résoudre ce problème. Toute idée serait appréciée.

fetch(url, { 
      method: 'GET', 
     }).then(function (json) { 
      for (var i = 0; i< json.length; i++) { 
       var option = "<option value="+json[i]+'" >'+json[i]+'</option>'; 
       dataList.appendChild(option);  
       console.log(option);   
      } 

      console.log(document.getElementById("datalist")); //returns null 


return (
     <div> 
      <input type="text" id="fetchList" placeholder="Select one..." list="datalist" /> 
      <datalist id="datalist"></datalist> 
     </div> 

    ) 
} 

Answer 1

Vous êtes sur la bonne voie. fetch() est asynchrone, donc votre console.log (...) sera exécutée avant que fetch() ait reçu et traité la réponse.

cependant, vous pouvez faire quelque chose comme ce qui suit pour retourner la liste une fois les données ont été reçues:

return (
     ... 
     { dataList.length > 0 
      ? <datalist id="datalist"> 
       { dataList.map((option) => 
       { option } 
      ) } 
      </datalist> 
      : 'Receiving data...' 
     } 
    ) 

MISE À JOUR: Je serais probablement que les valeurs joins réelles au tableau et diffuser la liste en utilisant

<option value={option.value}>{option.name}</option>