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

Posted 2023-03-14

技术标签:

【中文标题】React/redux 应用程序在 Safari 上呈现空白屏幕【英文标题】：React/redux app renders blank screen on Safari 【发布时间】：2016-05-09 12:38:24 【问题描述】：

我在 React/redux 中构建了一个应用程序，它可以在我尝试过的每个浏览器中运行，但 MacOS 上的 Safari 和 iPhone 上的任何浏览器都可以。我没有收到任何错误，没有控制台消息，没有什么能给我一些想法。它只在 Safari 中渲染标签，屏幕是空白的。

http://podcast.exploration.io

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

谢谢

【问题讨论】：

你有没有试过到处做console.logs，看看你能不能在Safari中发现一个故障点？这将是一个很好的第一步。是的，我做到了。该动作记录在动作减速器中。然后是 redux saga 应该采取该行动并做一些异步工作......但永远不会被调用。我想知道在这种情况下我将如何弄清楚发生了什么如果你的 reducer 正在接收动作，但 redux-saga 没有，那让我猜你的中间件有问题。您是否正在使用任何可能不适用于 Safari 的商店增强器，例如 Chrome DevTools 扩展或其他什么？这就是我创建商店的方式：const store = createStore(reducer, applyMiddleware(sagaMiddleware)) 除此之外，我不做任何其他商店改进。为了保持商店状态，我使用的是不可变的。与您分享资源会有帮助吗？会不会是webpack的问题？如果我显示 webpack 的构建配置可能会有所帮助 【参考方案1】：

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

【讨论】：

您能否详细说明您是如何解决的？很久以前，但我猜有些 fetch polyfill。【参考方案2】：

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

【讨论】：

【参考方案3】：

如果您在一台设备上出现黑屏，而在另一台设备上没有，请参阅https://***.com/a/61215326/470749

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

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

official Redux docs 说：

我们在示例中使用fetch API。它是一种新的网络制作API 替换XMLHttpRequest 以满足最常见需求的请求。因为大多数浏览器本身还不支持它，我们建议您使用 cross-fetch图书馆：
// Do this in every file where you use `fetch` 
import fetch from 'cross-fetch' 
在内部，它在客户端使用whatwg-fetch polyfill，和服务器上的node-fetch，因此您无需更改 API 调用，如果您将您的应用更改为通用的。

请注意，任何fetch polyfill 都假定 Promise polyfill 已经存在展示。确保您拥有 Promise polyfill 的最简单方法是在任何其他代码之前在您的入口点启用 Babel 的 ES6 polyfill 运行：
// Do this once before any other code in your app 
import 'babel-polyfill'