问题标签 [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 投票
0 回答
73 浏览

reactjs - 反应,标记 maxTags 不更新

在我的反应应用程序中,我有一个标记栏。maxTags 属性取决于用户输入。我目前有:

当我尝试从该DEF_BOORU选项切换到具有更高 maxTags 编号的其他选项时,tagify 搜索栏会自动删除多余的标签(maxTgas 似乎确实会更新)。但是返回之前的日志语句显示了具有正确 maxTags 属性的正确设置对象。

有谁知道为什么会这样?请注意,如果我尝试使用 tagifyRef 更改 maxTags,它会起作用。

0 投票
2 回答
956 浏览

reactjs - 错误 - PrimeReact 自动完成建议未显示

https://primefaces.org/primereact/showcase/#/autocomplete

我试图在组件加载一些数据后立即加载建议下拉列表componentDidMount。正在使用 中的数据进行suggestionsList更新,但未显示建议​​下拉菜单。objcomponentDidMount

简单地说,只要输入得到关注并且没有输入文本,就会显示一个建议下拉菜单。

abcCmp.jsx

0 投票
1 回答
34 浏览

javascript - 抽屉导航器屏幕奇怪的行为

我在我的 expo 管理的工作流项目中使用 react-navigation v5,我注意到的是,每次我访问一个连接到抽屉导航器的屏幕时,都不会调用生命周期方法......

这是示例:

我第一次访问“Screen1”时,useEffect钩子被调用,我的所有数据都被获取了。一旦我从它导航(导航到“Screen2”)并返回“Screen1”,什么都没有发生(不再获取数据) ......有什么我想念的东西,因为我每次访问“屏幕*”我的数据要重新启动(再次获取)?

谢谢!

0 投票
1 回答
111 浏览

reactjs - 使用 redux 和 react hooks 时首选哪种生命周期方法?

在编辑页面中,通过 redux 的 useSelector 方法,组件可以获得数据但它没有设置初始值。如何设置?

  1. 如何从商店设置初始 formData?
  2. 为什么在钩子组件渲染发生 4 次?

0 投票
1 回答
85 浏览

javascript - React Native - 如何根据 reducer 值的变化触发函数?

我有一个关于如何在一个组件中触发不同组件的减速器值更改的函数的问题。

我目前在我的Home组件中有一个运行在ComponentDidMount. 如果我的值为this.props.reducer.runtrue,则函数会触发。初始状态设置为,true因此该函数在应用程序首次加载时触发。

在我的Profile组件中,我有一个拨动开关,可以切换this.props.reducer.runtruefalseHome当 reducer 值发生变化时,是否可以触发我的函数?

下面是我拥有的代码的模型,我想知道ComponentDidUpdate我是否应该看一下,如果是的话,一些指导将不胜感激:

主页.js

0 投票
0 回答
89 浏览

reactjs - React useReducer 钩子和功能组件生命周期保证

我想确认我对功能组件和 useReducer 所做的假设。根据我的理解,useState 就是 useReducer,所以我将在这个例子中使用 useState 来简化。

我是否保证在调用setCount下一个渲染周期后将包含更新的计数值。我知道可以批量更新,以便在我看到渲染之前可以多次调用 setCount,但是在应用 setCount 的更改之前是否可以看到渲染?

批量更新可能会导致类似这样的结果(假设我在同一个事件调用中再次调用 setCount 或有悬念):

这就是为什么使用 setCount 的委托重载来确保它正在修改当前版本的状态至关重要的原因。

但是,是否有可能看到两次呈现相同的状态,一次是在单击之前,一次是在单击之后:

在上面的示例中,计数从 0 开始,我单击(调用 setCount),但是在 setCount 被“应用”之前,我看到了一个旧的“排队”渲染。因此,即使我单击并调用了 setCount,但在看到 setCount 触发的新值之前,我还是看到了旧的渲染。这是可能的还是可以安全地假设我永远不会看到一个值比上一次 setCount 调用中的值更旧的渲染。

0 投票
0 回答
75 浏览

javascript - 未调用 componentDidUpdate(prevProps)

**我会先发布代码,然后解释我以后遇到的问题。

解释:

  1. 在 ParentComponent 我有那个折叠,在那个折叠上我使用 this.state.id (可能会有所不同)传递 ID。
  2. 单击时的那个按钮也会切换折叠并显示 ChildComponent 及其道具。

设想:

  1. ParentComponent 是“卡片”,我有多个具有不同 ID 的组件。
  2. 每当我单击按钮时,状态都会使用来自 ParentComponent 的新 ID 进行更新,并作为 props 传递给 ChildComponent。

我面临的问题:

如果我切换不同的 ParentComponents,则 ChildComponent 中的 componentDidUpdate 停止被调用并且 ID 不会更新。这意味着我需要使用该 ID 获取的信息不正确。

此外, ChildComponent 上的 render() 没有被调用,似乎因为它渲染了一次它不会再次渲染。

这就是问题所在,每次传递给 ChildComponent 的道具发生变化时都不应该调用 componentDidUpdate 吗?每次切换不同的 ParentComponent 时,我都会更改传递的道具。

提前谢谢,我希望我说清楚了

0 投票
1 回答
50 浏览

reactjs - 为什么当 componentShouldUpdate 返回 true 时我的 react 组件不会重新渲染?

我无法理解生命周期挂钩在我的 React 应用程序中是如何工作的。我有一个应用程序,我在我的渲染方法中将一些道具传递给我的分页组件,如下所示:

在分页构造函数中,我打印出道具值。

它打印出 0。

很公平,我还没有获取我的博客文章。所以在 componentDidMount 中,我像这样获取博客文章:

所以现在博客文章被填充了,但是分页组件没有更新(即使博客本身似乎更新了)。

这就是我需要一些关于 React 生命周期钩子如何工作的指导。状态改变后渲染方法不会重新运行吗?我期待 Pagination 组件被重新渲染,这次让 totalRecords 道具打印出 3(或高于 0 的某个数字)。即使重新渲染,构造函数是否只运行一次?

因此,以防万一我不得不触发重新渲染,我在componentShouldUpdate()方法中运行了它:

确实,this.state.blogPosts.length表演0nextState.blogPosts.length表演3。所以它们是不同的,我期待状态更新为 3 篇博文。如果长度不同,我返回 true,它们是,所以组件应该更新。这不意味着重新渲染吗?

无论如何,totalRecords 仍然是 0。我什至在 Pagination 组件中设置了一个时间间隔:

在博客文章被获取并添加到状态之后很长时间,它每五秒打印出 0...。

为什么分页组件不更新为 totalRecords 的新值?

0 投票
0 回答
90 浏览

reactjs - renderChildren() 功能组件等效

我正在维护 React 应用程序,我必须将所有类组件变成功能。

一个组件具有该renderChildren()方法。

有没有办法在带有钩子的功能组件中模仿该方法?

我非常感谢您的支持。

0 投票
1 回答
646 浏览

reactjs - firebase 的 onAuthStateChanged 如何在 reactJS 的 ComponentDidMount 生命周期中工作

谁能解释一下这个 onAuthStateChanged 函数是如何在 componentDidMount 中工作的。我知道这个生命周期钩子只在组件安装时执行一次。那么里面的函数是怎么执行的呢?

我假设它就像回调函数,它在事件循环中继续运行,因为当状态改变时被触发,比如 JS 中的 addEventlistner。