React/redux 应用程序在 Safari 上呈现空白屏幕

IT技术 javascript reactjs redux redux-saga
2021-05-05 20:47:33

我在 React/redux 中构建了一个应用程序,该应用程序适用于我尝试过的所有浏览器,但适用于 MacOS 上的 Safari 和 iPhone 上的任何浏览器。我没有收到错误消息,没有控制台消息,也没有任何可以给我一些想法的东西。它只在 Safari 中呈现标签并且屏幕是空白的。

http://podcast.exploration.io

你知道我如何追踪这个问题吗?

谢谢

4个回答

我发现了这个问题。它失败的主要原因是“获取”功能……在 Safari 中不可用。我不确定为什么它不会打印任何内容,但我怀疑,因为在 try/catch 中调用了“fetch”。

我有一个类似的问题。我的列表项会被渲染但不会被绘制。所以我可以在开发工具中看到它们,但它们都是白色/透明的。我尝试transform: translateZ(0)在列表项中添加一个,它解决了这个问题。

如果您在一台设备上有一个空白屏幕,而在另一台设备上没有,请参阅https://stackoverflow.com/a/61215326/470749

此外,如果您的代码在fetch某处使用并且您的浏览器不支持它,则可能会发生这种情况

检查浏览器和操作系统支持:https : //caniuse.com/#search=fetch

官方终极版文档说:

我们fetch在示例中使用API。它是一种用于发出网络请求的新 API,可替代XMLHttpRequest最常见的需求。因为大多数浏览器本身还不支持它,我们建议您使用 cross-fetch库:

// Do this in every file where you use `fetch` 
import fetch from 'cross-fetch' 

在内部,它whatwg-fetch在客户端和node-fetch服务器使用polyfill ,因此如果您将应用程序更改为通用,则无需更改 API 调用。

请注意,任何fetchpolyfill 都假定 Promise polyfill 已经存在。确保您拥有 Promise polyfill 的最简单方法是在任何其他代码运行之前在您的入口点启用 Babel 的 ES6 polyfill:

// Do this once before any other code in your app 
import 'babel-polyfill'

这个问题对我来说也是获取。当我在使用 webpack 时,我按照这篇文章添加正确导入我:http ://mts.io/2015/04/08/webpack-shims-polyfills/