问题标签 [react-lifecycle]

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 回答
2033 浏览

javascript - React JS,如何只允许组件每秒更新一次

我无法限制组件更新的频率。组件 A 有一个父组件 B。

我想让组件 A 每秒只更新一次,因为我们使用套接字 IO 来更新实时结果,但是当有 100 个用户时,我们得到的更新太多,页面呈现的方式比我们想要的多看起来像条形图非常快速地上升和下降。

有没有办法只允许组件 A 每秒更新一次?我们是否必须控制组件 B 将 props 传递给组件 A 的频率?

0 投票
1 回答
448 浏览

javascript - 如何在 React 生命周期方法中正确调度操作?

如何在 React 生命周期方法中正确调度操作?

你好,朋友们,我checkSession()在我的父组件(App.jsx)中调用了一个动作。此操作可帮助我获取用户信息。
这就是 App.jsx 的样子:

如何在 Cart.jsx 组件中正确调度另一个操作。我尝试在componentWillReceiveProps方法内调度操作,但它会创建一个无限循环。我的 Cart.jsx 组件如下所示:

我刚刚尝试在 ComponentWillMount 中调度这个动作 - 但我的道具还没有准备好,所以我得到了一个错误。请帮我提供任何建议,并为我的英语感到抱歉。

0 投票
1 回答
30 浏览

reactjs - ComponentWillReceiveProps 正在改变我从 API 获得的道具

在我的ComponentWillReceiveProps()方法中,我的道具正在更新,仅从 API 中获取。请帮助如何恢复道具。

我的ComponentWillReceiveProps()

在我nextProps的变量nextProps.diagnose.chart_data中,每次都在更新,但它是从 API 中获取的。

你能帮忙如何不更新这个道具吗?

0 投票
0 回答
962 浏览

reactjs - 在 componentDidMount 之前没有调用 React ref

我试图在我的项目中遵循这个例子,但我无法让它工作https://react-slick.neostack.com/docs/example/as-nav- 因为我认为原因是:

  1. 它需要两个对象的引用来同步它们
  2. 它应该与 componentDidMount() 中设置的状态同步
  3. 设置状态时,参考未定义

我认为 ref 回调应该在 componentDidMount() 之前执行,但事实并非如此:

我的代码位:


这些是日志:

在此处输入图像描述

类似问题: componentDidMount 在 ref 回调之前调用

0 投票
1 回答
33 浏览

javascript - 提交 POST 请求后如何通过 GET 请求呈现我的最新数据

我在使用 Reactjs 生命周期时遇到了一些困难。我的前端和后端都设置好了,但我不知道如何在通过 POST 请求提交新数据后重新呈现最新数据。

我目前正在使用 componentWillMount 来显示我的数据库中的所有初始数据

我有一个 addData 函数,它向我的数据库发送一个 POST 请求

现在我知道我们可以将 GET 请求中的 listOfData 分配为变量并将新配方推送到状态数组(listOfData)中以在我们的前端显示它,但是我数据库中的表有一个 id 增量和一个timestamp 因此,如果我想更新或删除我的最新数据,则会导致错误。它无法读取有意义的 id 值,因为我没有在我的 POST 请求中分配 id。

我可以显示数据库中的新数据的唯一方法是刷新页面,这违背了目的。我是否必须从我的前端包含一个 id 和时间戳,然后才能定位正确的 id?必须有一种方法可以重新渲染我的页面并更新 listOfData 而无需刷新它。

我试过以下

但是这个def不是正确的方法。

0 投票
2 回答
7608 浏览

reactjs - 如何使用 recompose 库中的 HoC 创建 React 的新静态函数 getDerivedStateFromProps 作为生命周期方法?

最近有消息说 React 很快就会被弃用componentWillReceiveProps,取而代之的是新的静态函数getDerivedStateFromProps在这里查看更多

我目前正在将我的应用程序迁移到这个新的 API,但是getDerivedStateFromProps由于我正在使用 recompose 库来处理高阶组件,因此遇到了问题。我们componentWillReceive通过库的生命周期对象来使用道具。

所以在迁移到新的 API 之前,我有这个:

现在已更改为以下内容:

但是,getDerivedStateFromProps需要是静态的,所以我收到了关于这个的警告,不知道如何处理它。

warning.js?7f205b4:33 警告:生命周期(MyComponent):getDerivedStateFromProps() 被定义为实例方法,将被忽略。相反,将其声明为静态方法。

我该怎么做才能将它作为静态生命周期方法传递到我的组件中?

0 投票
1 回答
625 浏览

javascript - 使用“this”时如何适当地从 componentWillReceiveProps 迁移到 getDerivedStateFromProps

我正在尝试迁移我的应用程序以执行 React v16.3.* API,并且很难摆脱componentWillReceiveProps. 我有依赖于它的组件,并在其中调用组件的其他功能。

因为getDerivedStateFromProps是静态的,我不能再轻易地做到这一点,我需要如何适当地帮助。特别是对于这种情况,我有一个超时功能,只要收到新的道具就会重置。目前情况如下:

如您所见,我拥有this.timeoutthis.dismiss一旦更改为getDerivedStateFromProps. 我该如何处理?有没有办法将其更改为getDerivedStateFromProps静态函数,还是我必须以完全不同的方式进行?

0 投票
2 回答
958 浏览

javascript - 如何在 reactjs 中访问 c​​omponentWillMount() 中的变量值

我在我的内部分配值componentWillMount,如下所示

我试图在我的内部显示render()如下值。

但是即使我检查了里面的所有值,我也会得到未定义的值componentWillMount。我如何使用里面的componentWillMountrender()

0 投票
0 回答
3995 浏览

reactjs - React app componentDidMount 渲染两次

我有一个简单的反应应用程序,它有一个登录,它在成功的身份验证时接收一个 Json Web 令牌,并将其传递给一个兄弟组件(成员),该组件在其 componentDidMount 中使用这个 JWT 对服务器进行 fetch 调用。问题是 componentDidMount 被调用了两次,第一次使用未定义的 JWT,第二次使用检索到的 JWT。这是我的代码:

应用程序(父代码):

登录组件:

和兄弟成员组件:

关于如何解决这个问题的任何想法?谢谢!

更新:

发现了问题。Login中的Redirect组件似乎两次创建了Members组件。如果我从页面中删除重定向,而只是放置一个链接来进行重定向,它会按预期呈现一次。不过,不知道如何解决这个问题:(

0 投票
2 回答
8863 浏览

reactjs - React app componentDidMount没有从父级获取道具

我试图将道具从父组件传递给子组件,即使它被调用了两次(不知道为什么,componentDidMount应该只被调用一次),道具似乎是空的。

父组件:

子组件:

来自 Menu 组件内的 componentDidMount 的控制台日志打印:

有什么想法可以为我指明正确的方向吗?非常感激!