我的 React 应用程序在 iPhone 上的某个阶段显示一个空白页面。在其他任何地方（甚至是 MacOS 上的 Safari），它都能按预期工作

Posted 2023-02-21

【中文标题】我的 React 应用程序在 iPhone 上的某个阶段显示一个空白页面。在其他任何地方（甚至是 MacOS 上的 Safari），它都能按预期工作

【英文标题】：My React app shows a blank page at one of the stages on iPhone. Anywhere else (even Safari on MacOS), it works as intended

【发布时间】：2021-08-09 11:20:43

【问题描述】：

我正在开发一个应用程序，用户需要填写一些个人信息来注册约会。 （因为是保密工作，所以不能分享太多细节）

在某些时候，我的应用程序会打开一个“弹出”类型的组件，它只是列出了用户之前填写的信息。在进行后续注册步骤之前，它充当概述步骤。

我在各种浏览器上都试过这个。在 PC 上，它适用于 Edge、Chrome、Firefox 和 Opera。在 android 上，我只测试了 Chrome，它在那里运行良好。在 MacOS 上，我测试了 Chrome 和 Safari，两者都很好。

但是当我在 iPhone 上尝试它时，当我到达上述步骤时，我只是得到一个空白页。 我对问题可能是什么感到困惑，因为在其他地方，它似乎工作正常。即使在 Apple 生态系统本身，也有一些设备可以正确呈现应用程序。

任何帮助将不胜感激。 提前谢谢！

【参考方案1】：

我设法将问题定位到日期字段。由于某种原因，ios 上的 Safari 无法将字符串时间戳解析为特定日期（当我创建新的 Date 对象并将时间戳传递给构造函数时，它会引发错误）。

我手动将日期格式化为字符串，现在一切正常。

【讨论】：

听起来很有道理。只有两个选项可以很好地解决这个问题：使用 Date 构造函数并走一条非常窄的路径，只使用所有浏览器都接受和处理完全相同的字符串，或者使用解析库。

【参考方案2】：

在设备上，在 Safari 的设置中启用 Web Inspector。然后在 Mac 上，打开 Safari，如果您还没有启用“开发”菜单，并使用它附加到设备上的 Web Inspector（将有一个为设备命名的子菜单，所有可检查的框架都作为菜单项）。现在您有一个完整的检查员来调查问题。

【讨论】：

谢谢你。我不知道 Safari 在 iPhone 上有这个功能。如果找到解决方案，我会调查问题并回复。