通过获取填充数据列表

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 列表执行类似以下操作：

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

更新：我可能只将实际值附加到数组并使用

传播列表

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

通过获取填充数据列表

Populate datalist via fetch

reactjs

html-datalist