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>

通过fetch填充datalist

1 个答案: