问题标签 [use-ref]

我正在尝试访问地图的当前缩放或中心，但我遇到了一些错误。我是 React 新手，我不确定自己在做什么，但我尝试将 ref 附加到 GoogleMap 组件

我收到一个错误消息：无法读取 null 的属性“getZoom”，并警告无法为函数组件提供参考。我该如何解决这个问题？谢谢！

我有一个父组件，它有一个带有 onClick 事件的按钮，当出现错误时，我想关注子组件中的输入。我知道这可以使用 useRef 来完成，但我不断收到未定义的错误。这是我的代码：

我似乎找不到我正在使用 Gatsby 的问题，我创建了一个 Ref 来处理输入的表单验证，由于某种原因，非常基本的东西出错了

这是html：

这些是功能

这是CSS

现场示例：不知道黑色边框是什么，也许在验证后它可以正常工作，所有浏览器上的相同故事

如果您注意到同样的问题发生在您身上，我想知道发生了什么。谢谢

这是我的useEffect电话：

我正在使用它来控制弹出菜单。当您单击菜单图标以调出菜单时，它将打开它。当您单击不是弹出窗口的任何位置时，它会关闭弹出窗口。或者当组件被清理时，它也会关闭弹出窗口。

我@testing-library/react-hooks用来渲染钩子：

https://github.com/testing-library/react-hooks-testing-library

我们也在使用 TypeScript，所以如果有任何 TS 特定的东西也会很有帮助。

希望这是足够的信息。如果不让我知道。

编辑：

我正在使用两个伴侣钩子。我在其中做了很多工作，我希望能简化问题，但这里是钩子的完整代码。渲染 PopoutMenu 组件时调用顶部挂钩 (useWithPopoutMenu)。底部的在 PopoutMenu 组件的主体内调用。

这是组件：

用法是这样的：

我的反应代码遇到了一个非常奇怪的问题：useState 没有更新视图，并且在尝试了所有操作之后，问题仍然存在。我做了一个简单的代码来解释这个问题：

一些解释：我正在使用 UseEffect 和 useRef 创建一个下拉菜单，当您在容器外单击时它会消失。现在，当我想单击此下拉菜单的值时，它不会更新 DOM，而我正在使用 useState 更新负责更改的字符串的值。

提前谢谢你，查贝尔

您好，我在使用 useref 时遇到问题，我的应用程序不断从我不再使用的页面中读取代码

我有此代码，但是当我使用此代码更改为联系页面时

然后当我尝试在新页面上滚动时，我得到了这个错误代码

即使我现在在新页面上，事件监听器仍在监听。刷新页面后，该错误不会影响我现在和将来如何防止这种情况发生？

React Hook useEffect 缺少依赖项：'myDate' 和 'setMyDate'。要么包含它们，要么删除依赖数组。

如何将缺少的依赖项添加到useEffect仅运行一次的依赖项中？以下示例生成上述警告：

如果我包含它们，我会创建一个无限循环，因为setTimeout依赖项的值会发生变化：

如果我删除依赖数组，则useEffect在每个渲染上运行，并设置无限数量的 setInterval：

我也尝试useEffect完全删除，认为既然spinner是 a useRef，它不会在每个组件渲染上重新分配......但没有：

还尝试使用功能更新方法，像这样，但 lint 错误仍然存​​在并且代码不起作用：

我被卡住了……夹在岩石和坚硬的地方之间！如何解决此 lint 警告？

这个项目的 Github 仓库

基于我看到的其他解决方案，我创建了一个组件，该组件应该计算其子项的宽度和高度，然后将宽度和高度设置为等于其中较长者的长度.

• 前任。如果width=30，height=20，那么width和height应该设置为30。如果height是30，width是20，结果应该是一样的。

这是我尝试使用此组件的示例。（样式是使用引导程序完成的）

此示例产生以下结果。它计算的高度不正确，并决定宽度是较长的维度。然后将宽度和高度设置为等于宽度，这就是为什么一些孩子出现在圆圈之外的原因。

我有一个场景，我需要检测组件的第一次渲染。这里我建立了一个小例子。有人可以向我解释正确的方法是什么吗？

为什么大多数人建议使用 aref而不是普通状态。

https://codesandbox.io/s/condescending-burnell-0ex3x?file=/src/App.js

我想使用 G2plot 创建一个堆叠图。因此，我必须为组件创建 2 个文件。另一个用于将使用动态 I 调用组件的页面

将动态导入的文件

PS。我正在使用 nextjs 10 这是我预期行为的代码框 https://codesandbox.io/s/optimistic-banach-up3i0?file=/index.js