Popup-Datenliste über Abruf

Question

Der Versuch, einen Datenlistener mit den geparsten Daten einer Abrufanforderung zu füllen, die Optionen hängen jedoch nicht an. Ich bin mir ziemlich sicher, dass mein Problem darin besteht, dass die Seite nicht rechtzeitig gerendert wurde, um das Element zu finden, aber ich bin mir nicht sicher, wie ich das beheben kann. Irgendwelche Ideen würden geschätzt werden.

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

Sie sind auf dem richtigen Weg. fetch() ist asynchron, daher wird Ihre console.log (...) ausgeführt, bevor fetch() die Antwort empfangen und verarbeitet hat.

jedoch können Sie so etwas wie das tun nach der Liste zurückzukehren, sobald Daten empfangen wurden:

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

UPDATE: Ich würde wahrscheinlich nur die tatsächlichen Werte an das Array anhängen und die Liste propagieren

mit

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