问题标签 [react-lifecycle-hooks]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
150 浏览

reactjs - 我想要 React js 中 ComponentDidMount 和 ComponentDidUpdate 的组合功能

我正在使用 axios 获取 API 数据,并且该 API 具有查询参数(例如:searchQuery,在状态中定义)。我已经在 componentDidUpdate 中声明了它的 state 和 axios 调用的初始值。现在我希望我的用户以提交时将更改“seachQuery”状态的表单输入数据。问题来了,我想根据用户的输入显示带有提供值和未来结果的初始结果,但它没有发生。初始结果没有显示,因为 componentDidUpdate 只会在更新后调用。如果我在 componentDidMount 中进行 axios 调用,则不会出现根据用户输入的结果。我只想使用基于类的组件来做到这一点。

0 投票
1 回答
638 浏览

reactjs - 在 redux 商店更新时不会触发 useEffect

这是我的减速器代码

在上面的代码中,当我从另一个组件添加订单项时,useEffect 被触发,但是当我删除 orderItem(如您在deleteItem()函数中看到的)时,useEffect 没有在我的 redux 存储更新时触发,我的 useEffect 触发器依赖项是 OrderInput变量,如图所示在代码中。我还尝试将 useEffect 的依赖项设置为 order 数组的长度OrderInput

请帮助我知道我做错了什么?

0 投票
2 回答
6854 浏览

javascript - Props 改变后执行一个函数

我想在父组件中更改道具后在子组件中执行一个函数,而不必在子/父中管理额外的状态。

ChildComponent.js

当我试图控制 componentWillReceiveProps 中的 nextProps 时,即使在道具已更改后,它每次都会给出相同的结果。

0 投票
2 回答
72 浏览

reactjs - 问题将反应类组件转换为具有状态的功能组件未定义

生命周期可以在使用 componentDidMount() 的箭头函数中使用,并且在我尝试添加 useEffect 的唯一响应时出现错误?试图将类组件转换为功能组件。
我在下面的一个单独项目中创建了一个内容丰富的博客,并希望将我的博客添加到我的主项目中的 blog.js 页面。

有效的原创内容博客。

博客.js

导出默认应用程序;

我添加了一个 useEffect,现在我的状态未定义

我复制了我以前运行的页面并希望包含我的博客,但我在转换此处输入图像描述时遇到问题

0 投票
0 回答
476 浏览

reactjs - Jotai + React:意外的重新渲染和意外的陈旧状态值

我正在制作一款游戏,与大多数游戏一样,它具有可以从游戏中的其他任何地方触发的各种场景。

我选择使用 Jotai,因为我发现它非常容易用作全局状态管理工具。Jotai 原子的行为有点像setStateuseContext组合。

引导

我将玩家的能量存储在一个原子中。当能量达到0时,组件useEffect中的<EnergyLevel />a 会触发“全局事件状态”原子的变化。更改被父组件拾取,如果全局事件状态值是“结束游戏”值<Game />,则有条件地呈现组件。<EndGame />

用户可以单击“重新开始”,这会重置全局事件状态值和全局“活动屏幕”值,这会触发主菜单呈现。此时,全局事件状态已显式设置为NONE

当用户点击“加载最后一场比赛”——它设置了一个“加载状态”原子——父<Game />组件重新渲染并useEffect有条件地调用一个派生的、只写的原子,该原子从数据库中获取最后保存的游戏并设置所有其他原子到这些值。它还将任何全局状态跟踪原子重置为新加载游戏的默认值。

错误

从技术上讲,到目前为止,所有内容实际上都按预期呈现,但对于一个额外的组件:组件在完成加载后再次<EndGame />呈现。<Game />

进一步研究(以及许多 console.logs),我发现在预期的最终渲染之后(在 useEffect 之后)触发了另一个渲染并且<Game />在那个意外的阶段,全局事件原子值,显式设置NONE为以某种方式重置为旧的事件值。

问题

正如我在上面的错误部分的第二段中提到的,是什么导致了额外的渲染周期?为什么eventTriggeredOfType在这个意想不到的渲染过程中原子值会发生变化?

编码

具有这种奇怪行为的可重现代码在这里被沙盒化。加载后只需按照说明进行操作。

以下是一些片段来演示预期的逻辑:

0 投票
0 回答
34 浏览

javascript - Naker.back 与 React

Naker.Back 文档

我遇到了一篇使用 Naker.back 制作交互式背景的文章,因此我决定在我计划使用 MERN 堆栈构建的投资组合网站中尝试一下。我打算使用我创建的交互式背景并将其嵌入到我的 React 组件中。

这是我现在主页的文件结构

这是 Background.js 的代码,我根据提供的文档复制并编辑了值,并将作为 JSX 导出到 Home.js

将作为路由组件导出到 App.js 中的 Home.js 代码:

错误消息被抛出:

TypeError:无法读取未定义的属性“渲染”

0 投票
1 回答
200 浏览

reactjs - 检测导航变化

我有一个反应原生应用程序。我想检测到屏幕的导航,所以当我导航到特定屏幕时,我会触发更新功能。我有 componentDidMount 但仅在第一次导航时才有效...也查看了 AppState 但不监视屏幕之间的导航,我该怎么做?

谢谢

0 投票
1 回答
161 浏览

javascript - React Native 检测用户何时尝试退出应用程序?

我想根据组件卸载更新我的 redux 状态,但是如果用户终止应用程序,如何检测它并根据应用程序终止更新我的 redux 状态,因为在退出应用程序的情况下不会调用 componentWillUnmount。有没有办法在本机反应中检测应用程序终止(未暂停)?

0 投票
2 回答
55 浏览

javascript - 每次父母更新时都会调用 ReactJS 组件 useEffect 挂钩

我有一个父组件。

和一个子组件

问题是,每当加载状态更改为 true 时,子组件 useEffect 挂钩每次都会调用,即使我将 [] 数组作为 useEffect 挂钩的第二个参数传递。但是,如果我删除条件然后更改加载状态,useEffect 可以完美运行。

0 投票
0 回答
16 浏览

reactjs - 在 componentDidMount 中发出 http 请求并在那里更改状态,但它不会重新渲染我的 DOM,这有条件地取决于状态

由于不推荐使用 componentWillMount(),我在 componentDidMount() 中发出 HTTP 请求并根据响应更新那里的状态。虽然 componentDidMount() 在 render() 方法之后运行,但是在 componentDidMount 中使用 this.setState() 应该再次调用 render 方法。因此,如果请求中存在某些错误,则应重新渲染有条件地取决于状态中错误属性的模态组件。但是状态没有改变,因此我的 Modal 组件永远不会被渲染。有人可以帮忙吗??