问题标签 [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 回答
268 浏览

reactjs - 如何避免在以 React 基于类的组件为父级的无状态组件中进行不必要的更新

我正在学习 React,我发现 React.memo() “不起作用”,因为我的组件在我对基于父类的组件所做的每次更新时都会重新渲染。但问题是组件上的道具不会改变,至少对我来说是有意义的

我使用 useEffect 钩子在重新渲染的屏幕上打印,尽管我使用 React.memo(Men)

我希望在我的控制台中,useEffect 挂钩内的“渲染”消息只出现一次。

0 投票
1 回答
110 浏览

reactjs - 反应输入值在子组件中不起作用

我有两个组件。子组件将在模态框中打开。模态框组件将包含添加和编辑用户。我已经为模式框输入传递了一些值,并在 getDerivedStateFormProps 生命周期挂钩中获取了该值。最初它将值填充到输入值。但在那之后,如果在文本框中输入任何内容,则状态不会更新。请参阅下面的详细信息

但是状态没有更新。任何人都可以提供帮助来解决这个问题。提前致谢。

0 投票
1 回答
788 浏览

angular - 为什么在使用 [ngModel]="true" 时每个生命周期挂钩上的 this.value 未定义/为空

我有一个自定义表单控件,它实现 ControlValueAccessor 来处理[(formControl)]="..."[(ngModel)]="...".

我像这样使用这个组件:

我假设该值至少应在 ngAfterContentInit() 中定义,但它始终未定义或为空。至少在第一次运行中。这是我的控制台日志:

为什么 value 总是 undefined/null ,有没有办法改变它?

0 投票
2 回答
50 浏览

reactjs - 仅在父状态更新后如何接收道具?

我正在尝试构建一个小天气小部件,其中用户的地理位置被捕获在一个组件中,然后传递给一个子组件,该组件获取天气数据(基于位置),然后最终呈现一个指示当前天气的图标条件。

我将经度和纬度状态作为道具传递给我的 WeatherWidget。不幸的是,WeatherWidget 也接收到初始状态 null。我怎样才能避免这种情况?

感谢您的帮助!

0 投票
4 回答
272 浏览

reactjs - React.JS 中的无效 Hook 调用

我从这条线得到一个错误const [windowWidth, setWindowWidth] = useState(window.innerWidth);

我试图在屏幕 < 1307 时返回一个移动/较小的标题,并在它高于该标题时返回一个不同的标题。

0 投票
2 回答
436 浏览

javascript - 使用 getDerivedStateFromProps 从父级响应更新子组件状态

我是 React 新手,我喜欢在父组件本身中维护状态,并将相同的状态传递给子组件上的所有子组件我想从父组件状态更新子状态,我正在使用 getDerivedStateFromProps 来更新它。但我想我做错了,因为值在内部级别对象中更新,比如内部状态有一个名为状态的级别对象,我也尝试过传播它,但它没有用。

父组件

子组件

我已经尝试使用 { state: ...props.params} 以及渲染 console.log 中的 {state: props.params} 我得到

我期待的是

注意: 没有 REDUX。我不想使用REDUX如果还有其他更好的方法来更新子组件状态?另外,我想知道为每个子组件维护状态是否是一种好习惯?任何帮助表示赞赏

0 投票
1 回答
144 浏览

reactjs - 测试 useEffect(), Hooks

你好我是新的测试Hooks,所以我真的很迷茫,试图找到答案但没有结果。

所以问题是,我如何useEffect从这段代码中进行测试?

代码:

我想从代码中测试的是LoadingIndicator,检查道具isLoading,如果是trueor false

测试:

错误:

不变违规:元素类型无效:预期为字符串(对于内置组件)或类/函数(对于复合组件)但得到:未定义

有什么建议吗?

0 投票
1 回答
371 浏览

javascript - 加载组件未在 React.js 表单组件中呈现?

我希望这个加载器在我的 fetch 发出请求时呈现。我有一个<Loader/>似乎没有渲染的组件?我的逻辑和生命周期使用不正确吗?

我在整个表格中添加了一些评论......

0 投票
1 回答
87 浏览

reactjs - 我应该在我的 HOC 中哪里使用 useEffect 来接收 React 中的道具?

我有这个高阶函数:

它应该基于我在条件中使用的一些道具来渲染我的元素。

它从 * Parent 类 Component获取道具,后者从 redux 商店获取这些道具。

*链接到我的仓库以检查整个文件

上面的 HOC 几乎是完美的,但是当有人出于某种原因尝试注销时,我在导航的左侧链接上得到了这种行为。

在此处输入图像描述

我开始认为问题可能是由于重新渲染而我没有做任何事情。

我最近在一个组件类中了解到,componentDidUpdate当组件发生变化时,您会使用生命周期方法。

所以我做了一些挖掘广告,发现这篇关于在 HOC 中应该使用的方法的帖子。我的问题是它应该去哪里?

其实我也想过这样的事情,但是没用。。。

导入反应,{ useEffect } from 'react';

}, [route]);}>{anchorText} } else { return null } } else { return 登录!} }

无论如何,我只是想了解一下为什么当您单击注销按钮时,其他导航链接也说登录...

0 投票
1 回答
302 浏览

reactjs - 如果我们在componentDidMount内部调用回调函数,如何用componentDidMount替换useEffect?

通过使用 useEffect,我的数组状态变量没有附加上一个值,但是 componentDidMount 做到了

我在使用useEffect时console.log out消息,并且所有消息都被正确打印出来,但是状态没有被存储,如果我将messages状态变量设置为useEffect的依赖项,它会进入无限循环

我希望使用 useEffect 的结果与 componentDidMount 相同,它对消息状态数组变量中的所有消息进行哈希处理,但是通过使用 useEffect,我可以控制台输出所有消息,但消息状态数组变量为空,因此最终结果仅为最新消息。