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

reactjs - 在 React Native 中如何销毁组件实例以避免内存泄漏并释放原生代码的底层视图对象?

我想销毁我已经实例化的一些组件以释放内存。在我当前的应用程序中,我实例化然后释放它(删除对它的引用)的几乎每个视图都不会被垃圾收集。我不提意见。我不确定这个内存泄漏是由我的应用程序引起的还是它是 react-native(并且 react-native 有一些内存泄漏问题)。有没有办法自信地销毁视图实例?

0 投票
3 回答
1820 浏览

reactjs - 在构造函数中调用 setState 会给出警告

我有一个由其他人编写的代码,constructor其中我已经state初始化但也称为setStateif propsundefined代码如下:

当我执行我的模块时,我在控制台中收到警告警告:warning.js:35 警告:setState(...): Can only update amounted ormounting component。这通常意味着您在未安装的组件上调用了 setState()。这是一个无操作。

我搜索了一下,发现 setState 不应该在构造函数中调用。但是仍然无法理解在构造函数中所做的事情以及反应所期望的理想方式。需要一些帮助来理解,构造函数中完成的代码是否正确,如果是,为什么,如果不是,为什么?

0 投票
2 回答
138 浏览

reactjs - 为什么我们更喜欢在 componentDidMount 中而不是在 componentWillMount 中编写标头或 api 请求或 ajax 代码

为什么我们更喜欢在 componentDidMount 中而不是在 componentWillMount 中编写标头或 api 请求或 ajax 代码。

需要与示例简单明了的区别

0 投票
1 回答
2766 浏览

javascript - 在渲染组件之前清除特定的 redux 状态

我的购物车有以下“购买”按钮。

我还有一个名为 Tooltip 的组件,它会显示自己的错误/成功消息。它使用按钮的宽度来确定它的中心点。因此,我使用 `ref 因为我需要在 DOM 中访问它的物理大小。我读过使用 ref 属性是个坏消息,但我不确定如何定位基于物理 DOM 的子组件。但这是另一个问题...... ;)

我将应用程序的状态保存在 localStorage 中。如此处所示: https ://egghead.io/lessons/javascript-redux-persisting-the-state-to-the-local-storage

我遇到的问题是我必须success在渲染之前清除状态的属性。否则,如果我在状态中有一条成功消息,则在初始 render() 上Tooltip也会尝试渲染。这是不可能的,因为它所依赖的按钮还没有在 DOM 中。

我认为通过 Redux 操作清除成功状态componentWillMount会清除成功状态并因此解决问题,但似乎 render() 方法无法识别状态已更改并且仍会显示旧值在 console.log() 中。

我的解决方法是检查按钮是否存在以及成功消息:showSuccessTooltip && this.addBtn

为什么 render() 无法识别 componentWillMount() 状态变化?

这是 ProductBuyBtn.js 类:

0 投票
2 回答
71 浏览

reactjs - 反应生命周期

我用这个方法来处理组件,componentWillMount 来初始化主页的数据,当路由器更改(类别页面)时使用 componentWillReceiveProps,但是当我从类别页面返回主页时,我知道因为 componentWillMount 只做一次,所以我不能见数据。

我把这个初始化的代码放到componentWillReceiveProps中,它可以工作,但它会不断地调用fetchBooks(1),尽管我试图处理一些条件,请帮我解决这个问题,非常感谢。

0 投票
2 回答
943 浏览

reactjs - 为什么我的 React 子组件没有收到新的道具?

我有一个充当可排序表的 React 组件。表头和表行是容器的子项,容器正在处理表的状态。单击标题时,数据会重新排序,就像在这个语义 UI 反应示例中一样。

第一次单击列标题时,第一个闭包运行,并this.setState更改容器的状态,并触发子项接收新的道具并相应地更新。如果我重新单击列标题以反转数据的顺序,则第二个闭包运行,并this.setState更新容器的状态。因此,子组件会OverviewTableHeader更新,但OverviewTableRows不会。

这是一个实际操作的视频。

在视频中,您可以看到OverviewTableRows触发器componentWillReceivePropsshouldComponentUpdate第一次setState在父级中触发,但不是第二次。

如果需要,我可以添加我的所有代码。这是一个错误吗?任何帮助是极大的赞赏!

0 投票
1 回答
893 浏览

reactjs - Next.js 数据加载问题

我在使用 Next.JS 并为我的页面获取初始道具时遇到问题。我正在做一个有几个(7-8)页的应用程序。在左侧菜单中,单击图标后,路由器会将用户推送到正确的页面。然后,如果用户登录,页面和子组件就会加载。一切正常,因为我试图用加载组件来覆盖加载时间,如下所示:

设计目标是在获取数据时启动加载组件。不是之后。我试图用 React 生命周期钩子来做,但似乎`

静态异步 getInitialProps({req})

先于一切。查看整个代码

0 投票
2 回答
5839 浏览

javascript - componentDidMount 生命周期方法中的条件异步操作不断循环

我正在使用连接到 API 的 redux 和 sagas 开发一个反应应用程序。

有一个表单组件有两个下拉字段:程序和联系人字段。表单设计的工作方式是,当用户选择一个程序时,表单使用 programId 获取已为该程序注册的所有联系人。然后将这些联系人填充为联系人下拉字段的选项。这可行,我已经使用 componentWillReceiveProps 实现了它,如下所示:-

现在,我正在尝试添加一个附加功能,当从程序的配置文件页面访问此表单时,它会使用 programId 自动填充表单。在这种情况下,由于 programId 甚至在组件挂载之前就已预加载到 formData 中,因此不会触发 componentWillReceiveProps,因为 prop 没有变化。所以我决定让 programContacts 在 componentDidMount 生命周期方法中获取,如下所示:-

逻辑是,只有在programId不为空且programContacts为空时,才必须进行获取请求。但这是一个无限循环的获取。

我发现 if 语句被一遍又一遍地执行,因为 if 语句主体中的表达式甚至在上一个 fetch 请求与结果一起返回之前由 componentDidMount 再次执行。并且因为条件之一是检查结果数组的长度是否为非空,所以 if 语句返回 true,因此循环继续进行,而不会让先前的请求完成。

我不明白的是为什么必须重复执行 if 语句。一旦 if 语句执行一次,它不应该退出生命周期方法吗?

我知道也许可以使用某种超时方法来让它工作,但这对我来说不是一个足够强大的技术来依赖。

是否有最佳实践来实现这一目标?

此外,是否有任何建议不要在 componentDidMount 方法中使用 if 条件?

0 投票
1 回答
210 浏览

reactjs - react-lifecycle-component 在 componentDidMount 中有道具

我在我的反应应用程序中使用react-lifecycle-component,并在这种情况下发生,我需要componentDidMount回调从后端加载一些数据。要知道要加载什么,我需要道具,但我找不到检索它们的方法。

这是我的容器组件:

有什么线索吗?

谢谢。

0 投票
1 回答
1742 浏览

javascript - 如何在ajax请求后使组件重新渲染

在 ReactJs 的一个函数中重新渲染相同的组件。我正在添加评论,然后我想重新渲染相同的组件。任何人都可以帮忙吗?