通过提取填充数据列表

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>