通過提取填充數據列表

Question

嘗試用來自提取請求的解析數據填充數據列表，但不添加選項。我很確定我的問題是頁面沒有及時呈現元素，但不確定如何解決這個問題。任何想法，將不勝感激。

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

你在正確的軌道上。 fetch()是異步的，因此您的console.log（...）將在fetch()收到並處理響應之前執行。

然而，你可以不喜歡下面的返回一旦數據已經接到單子：

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

更新：我只的實際值可能追加到數組和傳播使用

列表

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