问题标签 [ionic-react]

我有一个奇怪的错误正在尝试解决（或者我可能因为我是 React 新手而让它变得很奇怪）。我正在使用 React 和 TypeScript 构建一个应用程序，该应用程序允许我订阅某些主题，以便接收值并在 UI 中实时显示。

简而言之，我有一个包含主题的数组，我正在循环这个数组以动态创建 UI 元素：

如您所见，我正在我的根应用程序中创建一个全局套接字连接并将其作为道具传递给孩子。然后，我props.socket.on('subscribe', callback);在子组件中调用。

这是我的子组件（滑块）的代码：

正如你所看到的，我这样做是因为我需要将事件发送到我指定主题名称的服务器，以便对服务器说，嘿，我想订阅这个特定的主题。我不知道这是否是最好的方法，因为我正在为所有 UI 组件调用相同的事件和相同的回调函数。

这很好用，这不是我的问题。我的问题是我还将这个全局套接字对象传递给下一个 UI 组件，即CustomComponent. 这是我的代码的简化版本：

如您所见，我使用useEffect钩子socket.on在组件挂载时调用，因为我希望它在组件挂载时运行，而不是由像 Slider 组件中的按钮触发。

现在这不起作用，我无法使用从服务器发送的消息。这就像我props.socket.on的不工作，这意味着它没有监听来自服务器的传入响应。令人惊讶的是，当我根本不传递数组依赖项或当我在依赖项数组中传递句柄函数时，这会起作用。但是，这每秒渲染数千次，过了一段时间应用程序冻结了，我什么也做不了。

编辑

我正在应用程序组件之外创建我的套接字实例，以便它不会一直呈现。我不知道这是否是合适的方法。所以我有这样的事情：

正如你所看到的，我在外面创建了套接字，我通过将它传递给子组件在应用程序组件中使用它。

我想开发一个应用程序，我可以在其中发送远程推送通知以响应本机应用程序。推送通知将包含一个 url 链接，当用户单击该链接时，应用程序应在应用程序中打开该链接（webview）

这可能与本机反应或博览会有关吗？

我无法在我的 ioncard 组件中设置背景图像。这是我的代码

背景颜色：'黄色'

似乎工作正常，因为这只是为了检查，但我在任何地方都看不到背景图像。“IonImage”标签也可以正常工作，但我希望图像在背景中......

我在我的项目中使用了许多组件，并且在所有这些组件中，每个组件都需要不同的 ionIcon。所以我创建了 Icon 组件。图标名称从每个父组件传递到 Icon 子组件。但它没有验证。

**

图标组件

 属性 'propsIcon' 不存在于类型 'typeof import("/Users/dubaitradeit/Desktop/Mobile Apps/Ionic/lastMile/node_modules/ionicons/icons/index")' 上面的警告我得到

有这个用户数组，其中存储在照片中的用户名是从照片数组中拆分出来的，我想在显示按钮时显示数组结果。代码片段如下

经过数周的调试并不得不实施一个糟糕的解决方法来让我的 react 应用程序正常工作，我才发现了这个问题，作为 react 的初学者，这让我很困惑，所以我发布这个问题是为了听听你的建议。

我有一个 react 应用程序，或者更确切地说是 Ionic react 应用程序（但它实际上与普通的 react web 应用程序相同），我使用著名的socket.io库与后端通信并实时接收消息。

为简单起见，以下是我的代码的构建方式：

如您所见，我的应用程序很简单。我正在传递套接字对象以侦听子组件中的事件，这一直很好，直到有一天我注意到如果用户删除了 UI 中的 Component2 之一，那么我会收到 socket.io 收到的警告一个事件，但组件已经卸载，它将导致内存泄漏。这是反应中的一个著名警告，这里是警告：

谷歌搜索后，我发现 socket.io 有一个内置函数来执行此操作，这是socket.removeAllListeners()我在重置函数中调用的。这里变得有趣了，这工作正常，现在用户可以安全地删除。但是，socket.onCustomComponent（应用程序中的最后一个组件）中的调用不再起作用。如果我在重置函数中注释该socket.removeAllListeners()行，则socket.onCustomComponent 中的调用会再次开始侦听和接收消息。

令人惊讶的是，这不仅仅适用于我的应用程序中的最后一个组件，即CustomComponent. 但是，它适用于其他组件！正如您在代码中看到的，我将reset函数作为道具传递给Component1，因此它与CustomComponent.

有人知道为什么这不起作用以及如何解决它？

笔记

我实施的解决方法是将socket.onCustomComponent 中的函数移动到 useEffect 中，以便在 ComponentDidMount 和 ComponentDidUpdate 发生时始终触发它。这里的问题是 socket.on 触发不止一次。因此，如果我从服务器收到一条消息，那么我会在浏览器中看到该函数连续调用了 5 次。

这个和这个问题也与我的问题有关。

所以我有这个应用程序使用 Ionic React 和 Cloud Firestore 作为数据库。大多数情况下，我使用这些代码来检索数据：

这段代码显示了我需要的数据。但是，当我检查 Firestore 使用情况时，在 15 分钟内它已经有 6K 读取。如果有一天用户数量正在增加，这不合适。我的应用很快就会达到每日限额。我的 Firestore 项目中的文档少于 30 个。

我有什么解决方案可以减少 Firestore 中的阅读量吗？是否有任何示例可以在 NoSQL Firestore 中建立更好的结构以减少读取？ 我看过 Firebase 关于 Firestore 的教程视频，但我仍然不明白。

我正在编写一个带有离子反应的移动应用程序，它几乎完成了。但是我发现了一个这样的错误。在我的 Android 设备上测试应用程序时，我做了这样的事情，这里有问题。

• 我单击主页选项卡并转到主页。然后我又点击了主页标签 3 次。
• 当我按下设备上的返回按钮时，它会将我重定向回主页。

如何修复此错误？我搜索了很多，但找不到它。

从现在开始谢谢你。

我是 React 和 Ionic 以及一般 JS 的新手，所以我按照教程并尝试将其调整到我的用例。

我想要实现的是以下内容：

• 应用加载时从本地存储读取 JSON 字符串
• 应用退出时将（较新的）JSON 写回存储

我现在拥有的是（严重截断）：

探索容器.tsx

使用文件系统.ts

现在的问题：readVars()中的调用React.FC不等待get自定义钩子中的 。当我在读取时记录输出时，我发现这是一个未实现的承诺。自然，这会提示JSON.parse()抛出错误，因为它可以解析的字符串还没有被读取。

我尝试在其中声明一个异步函数，React.FC以便等待它，但函数声明是不可能的，因为 FC 始终处于严格模式。我还尝试在之前声明异步函数，React.FC但这也不起作用，因为如果我正确解释了错误消息，我就不能在 FC 之外调用钩子。在自定义钩子中，我以前有一个 await 语句而不是.then，但行为是相同的。

如果有一种更简单的方法可以将 JSON 字符串读取和写入某种形式的持久性（！）存储，我会很高兴了解它！

说，我有这个切换：

vars.darkMode是toggle的保存值，所以在加载页面时设置状态。所以，知道我想编写一个调用 onChange 的函数，但我不知道如何在这里传递或访问“checked”属性......

例如，让我们这样做：

我怎么做？

我也读过一些关于onChange={e => darkModeToggle(e)}但老实说，我不明白......e似乎没有在checked任何地方传输 - 属性。我考虑过为切换 id 运行一个选择器，然后读取它的值，但API 参考明确指出不要使用“值”，但要使用“检查”。

上下文代码：