React fetch() 仅在移动设备上不起作用答案

【问题标题】：React fetch() not working on mobile onlyReact fetch() 仅在移动设备上不起作用
【发布时间】：2018-09-14 04:33:49
【问题描述】：

我是一名实习生，协助为我们公司开发一个简单的目标网页。主页本质上是一个搜索栏，当用户输入他们的查询是否与我们数据库中的信用合作社匹配时，该信用合作社的名称将在下面输出，并带有指向其页面的链接。想象一个谷歌式的搜索栏。

这在台式机上效果很好，但由于某种原因，在移动设备上，当用户输入查询时，什么都没有出现，即使他们输入的是我们数据库中最确定存在的内容。

要查看运行中的网站，请拨打http://mycuapp.com。

这是相关的 HTML：

<Search></Search>
<div id = "results-bar" class="hidden"></div>

和 JS：

handleTyping(event) {
    event.preventDefault();
    event.stopPropagation();

    const data = new FormData(event.target);
    var query = event.target.value;
    var url = "/search/" + query; 
    var i;
    if (query.length >= 3) {
        fetch(url, {
            method: "GET",
        }).then((value) => {
                return value.json();
        }).then((Response)=>{
            var item = document.getElementById("results-bar");
            if(item.className=='hidden'){
                item.className = 'unhidden' ;
                clickedButton.value = 'hide';
            }
            for (i = 0; i < Response.payload.length; i++){
                var displayName = Response.payload[i].displayName;
                var cuURL = Response.payload[i].url;
                if(document.getElementById("results-bar").innerHTML.indexOf(displayName) == -1){ //not yet displayed in search results
                    var result = "<div class = 'result'><a href='" + cuURL + "'><p>" + displayName + "</p></a></div>";
                    document.getElementById("results-bar").innerHTML += result;
                }
                console.log(Response.payload[i].displayName);
            }
        });

    }
}


render() {
    return (
        <form className="" id="search-form">
            <input onKeyUp={this.handleTyping} type="text" autoComplete="off" name="query" placeholder="Search your credit union's name to download the mobile banking app."/>
        </form>
    );
}

任何见解都将不胜感激，包括有关如何从 iPhone 调试问题的任何建议（bc 当使用 Chrome 的开发人员工具进行模拟时没有问题）。

编辑：原来问题在于“const data = new FormData(event.target);”这一行FormData 与 Safari 或其他东西不兼容。我们的首席程序员抓住了它。一旦我们摆脱了那条线，一切都很好！感谢大家的帮助。

【问题讨论】：

尝试添加 polyfill 看看是否能解决您的问题：polyfill.io/v2/docs

标签： javascript html reactjs fetch jsx

【解决方案1】：

似乎您正在尝试使用 Mobile Safari 不完全支持的 Response 流。 https://developer.mozilla.org/en-US/docs/Web/API/Response

您也可以使用 Safari 6.1+ 支持的 fetch polyfill https://github.com/github/fetch

表单数据：https://developer.mozilla.org/en-US/docs/Web/API/FormData 与 Safari Mobile 不兼容。

【讨论】：