问题标签 [use-effect]

我遇到了父组件和子组件之间的通信问题。

我希望父母（主机）保持自己的状态。我希望孩子（来宾）通过该状态并对其进行修改。孩子有他的本地版本的状态，可以改变孩子想要的任何东西。然而，一旦孩子玩完状态，他就会将它传递给父母以实际“保存”实际状态。我将如何正确实现这一点？

我的代码中的问题：

• 在 updateGlobalData 处理程序上，我记录了 data 和 newDataFromGuest ，它们是相同的。我希望 data 代表旧版本的数据， newDataFromGuest 代表新版本

• updateGlobalData 被称为 2X。我可以通过从 useEffect 内部的 deps 数组中删除 updateGlobalData ref 来解决这个问题，但我不想搞砸它。

我想要的结果应该是：

• 数据状态应该保留旧数据，直到调用 updateGlobalData
• 当我单击按钮时，我希望 updateGlobalData 只被触发一次

来自 Codesandbox 的代码：

我的 React 代码中有一个功能组件，如下所示：

我需要测试上述功能组件，以确保添加和删除事件侦听器，如 useEffect() 挂钩中所述。

这是我的测试文件的样子 -

但是，我在声明“callBack”常量的行（在上面的代码中突出显示）出现以下错误：

TypeError：无法读取 null 的属性“funcB”

实际上，它使组件正常，但 wrapper.instance() 评估为 null，这会引发上述错误。

有人会知道我缺少什么来解决上述错误吗？

我正在处理一些代码，但我遇到了这个错误。我以前在我的其他项目中没有看到它出现过，所以我不确定它为什么会出现在这里。我正在使用 useEffect 钩子，当用户从下拉列表中选择一个选项时，我想更新它。发生的情况是，当用户选择一个选项时，我收到以下错误TypeError: Assignment to constant variable.。我知道这是说我正在尝试更新一个不可能发生的常量，但我不明白为什么。不幸的是，

我无法确定如何正确呈现我的代码，但接下来的两行是我遇到问题的代码行。然后是我正在处理的完整代码。

const [TitleId, setTitleId] = useState(0); const TitleSelect = event =>{ console.log(event.target.value); setTitleId=(32); };

非常感谢任何建议或意见。

我想知道如何在使用 useEffect 获取数据后运行函数，函数在提取数据后在哪里操作数据？

因此，在此示例中，我从上一页中获取playerNameand playerChoice，然后在页面加载时将其添加到我的 useState 中。

之后我随机生成computerChoice.

但是，在那之后，我想使用已经添加到状态中的playerChoiceAMD ，并使用它来查看游戏是赢、输还是平。computerChoice

result最终是null因为我假设在getResult调用函数时，状态尚未设置。

大家知道在这种情况下应该怎么做吗？考虑到您可能想从 API 中获取数据，然后在渲染之前对这些数据进行处理，这似乎是一件很常见的事情。

我有这个useEffect钩子：

我希望它仅在更改时才进行添加position。如果tileSize改变我只是想让它做乘法。

我试着把它放在两个useEffect，但后来我收到React Hook useEffect has missing dependencies警告：

在这种情况下，最佳做法是什么？

编辑：

一个可重现的例子：

警告信息：

第 31 行：React Hook useEffect 缺少依赖项：'tileSize'。包括它或删除依赖数组。如果 'setTop' 需要 'tileSize' react-hooks/exhaustive-deps 的当前值，您也可以用 useReducer 替换多个 useState 变量

第 36 行：React Hook useEffect 缺少依赖项：'controller.position.x' 和 'controller.position.y'。要么包含它们，要么删除依赖数组 react-hooks/exhaustive-deps 第 46 行：无法访问的代码 no-unreachable

我有使用钩子的功能组件。在useEffect挂钩中，我只想从后端获取数据并将结果存储在 state 中。然而，尽管将 data 变量添加为依赖项，useEffect 仍然会在无限循环中触发 -即使 data 没有更改。如何阻止 useEffect 连续触发？

我已经尝试过空数组破解，它确实阻止了 useEffect 连续触发，但这不是所需的行为。例如，如果用户保存新数据，useEffect 应该再次触发以获取更新的数据——我不想模拟 componentDidMount。

我希望 useEffect 在初始渲染后触发，并且仅在 invoiceData 更改时再次触发。

我将 Gatsby 与 CSS 框架 Bulma 一起使用，为了让移动导航栏工作，您必须为一个按钮添加一个事件侦听器，该按钮仅在屏幕尺寸为特定尺寸时才可用。在以前的 Gatsby 版本中，它运行良好，只是在最近一周我遇到了问题。现在我收到一个无效的钩子调用

我注意到，如果我连续两次对同一个 API 端点进行 GET 调用，那么之前的结果似乎会被缓存。这导致我的 React 组件的逻辑出现问题，它是一个多页向导。

我这样定义我的 API 请求：

然后用户可以在输入元素中输入用户名，并像这样检查它的存在：

然后我有一个useEffect处理从服务器返回的数据。它是这样开始的：

问题是，useEffect如果说，用户标签回到用户名字段然后再次标签出来，则不会调用。这设置isFetching为true，这会禁用Next我的向导中的按钮，使用户被困在该页面上。

关于如何解决这个问题的任何想法？

我有以下 React 组件（使用hooks），其中列出了一些Tasks作为下拉列表。当从列表中选择一个项目时，我想显示一个Update表单。这仅在第一次选择项目时有效。当我选择一个新项目时，什么也没有发生（尽管console.log(e.target.value);打印了正确的值）。我将所选任务的 id 存储在st_taskId.

我想知道您是否在下面的代码中看到任何问题：

下面是UpdateReviewTaskForm组件的代码：

我正在尝试使用反应挂钩来制作一个 Table 组件，该组件根据用户可以选择的一组过滤器显示来自 API 的数据行。我想在用户单击“应用过滤器”按钮时进行新的调用以获取数据，而不是在用户对过滤器进行更改时。

我正在使用上下文来管理“过滤器”状态和“lastFetched”状态，该状态跟踪用户上次单击“应用过滤器”按钮的时间（以及页面上的其他状态）。对上下文的更新是通过 useReducer 钩子及其调度方法进行的（参见此处）。

数据获取发生在 useEffect 挂钩中，只要“lastFetched”状态更改，该挂钩就会重新运行。这似乎工作正常；但是，效果会引用上下文中未包含在依赖项中的其他值（即过滤器）。我知道穷举-deps eslint 规则，我担心我没有正确处理钩子的依赖项。

同样，这似乎有效，但根据反应文档，似乎我应该将钩子中使用的上下文中的所有值包含在钩子的依赖项中，以防止过时的引用。这会导致逻辑中断，因为我不想在过滤器更改时获取数据。

我的问题是：当用户单击“应用过滤器”、更新 context.lastFetched 并触发 useEffect 挂钩时，该挂钩是否会从上下文中引用陈旧的过滤器状态？如果是这样，为什么？由于每当单击按钮时都会重新运行效果，并且所有状态更新都是通过 reducer 完成的，所以在闭包中引用陈旧变量的常见危险是否仍然适用？

任何指导表示赞赏！

注意：我考虑过使用 useRef 来防止这个问题，或者可能设计一些自定义异步中间件来获取某些调度的数据，但这是我目前拥有的解决方案。