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

reactjs - 我们如何在基于类的组件的 componentDidUpdate() 生命周期中停止重复调用,就像我们在 useEffect 挂钩中所做的那样?

当我使用基于类的组件时,我必须使用状态布尔值来指定何时开始获取和停止......我试图完成工作的事情很奇怪,但我仍然很想知道我们是否可以停止在 componentDidUpdate() 生命周期方法中也重复调用请求。

我知道这不是从生命周期进行请求调用的正确方法。也不要因此评判我......所以,请告诉我是否有人可以帮助我正确地做到这一点,或者这样做是否合法......

0 投票
1 回答
423 浏览

react-hooks - 在 React Native 中移动到另一个屏幕时如何卸载屏幕

我正在使用 React Navigation v4、React Hooks 和 ES6 开发一个 React Native 应用程序。

我有 2 个底部选项卡(电影、节目)和 4 个具有以下堆栈结构的屏幕:

我的场景

1) 从电影列表移动到单个电影页面

MovieList 包含电影列表,当我单击其中一个时,我首先获取一些 API 数据,然后像这样移动到 MovieDetail 屏幕

MovieDetail 现在位于 Movies 堆栈的顶部,而 MovieList 位于底部

2)移动到不同的选项卡(导航堆栈)

然后我单击 Shows(第二个选项卡),它使用 props.navigation.navigate('ShowList') 将我带到 ShowList

3)问题

如果我单击 Movies 选项卡,我希望被移回 MovieList,但由于 MovieDetail 从未卸载,它仍然位于 Movies 堆栈的顶部,这意味着我看到的是旧屏幕。我必须单击两次才能返回 MovieList 屏幕。

我已经阅读了很多关于如何使用 onFocus/onBlur 订阅的建议,但是我找不到使用 React Hooks 的解决方案。

我理想的解决方案是找到一种方法来收听 MovieDetail 屏幕中的 onBlur 状态,可能使用 useEffect 挂钩并在离开之前以某种方式卸载它。

0 投票
2 回答
2891 浏览

reactjs - 在 ReactJS 中调用挂载函数

在 ReactJS 上加载组件时调用函数时出现问题。我尝试使用 componentDidMount() 并且编译时出错。请在下面检查我的代码。谢谢

0 投票
0 回答
22 浏览

reactjs - 是否聚合了多个 this.setState 调用的状态更改?

从理论上讲,我知道钩子中的状态变化setState是聚合的,即如果我在同一个函数中多次调用它,就会收集状态的变化,然后状态只会改变一次。

this.setStateReact 的 Component 类也是这种情况吗?例如,如果我想this.setState在 componentDidMount 上添加多个调用?

谢谢。

0 投票
1 回答
34 浏览

reactjs - 当我们在 react 中点击 componentDidMount 时,组件安装在哪里?它是真正的 DOM 还是 VirtualDom?

你什么时候会在 react 中点击 componentDidMount 钩子?是在组件安装到虚拟 dom 还是实际 dom 时?

0 投票
2 回答
100 浏览

reactjs - redux props 两次接收数据

我正在使用 redux 来获取异步数据和响应。在下面的组件中,当我发布配方和从服务器时,我通过 redux 两次成功模式弹出窗口获得响应。减速器仅在我检查完所有内容后才运行,只有组件有问题。问题可能出在生命周期方法上。

0 投票
0 回答
57 浏览

reactjs - 您可以在功能组件(React)中使用 useEffect 复制静态 setDerivedStateFromProps 吗?

我正在阅读 React 的书(初学者书),但我不太确定如何复制这个生命周期静态函数setDerivedStateFromProps

这是具有类方法的代码(但我需要使用功能方法):

我看到了 React 文档,他们给出了一个例子。我不完全确定它的含义以及它是否对我有用,但是我尝试将其用作参考并写了以下内容:

上面的代码会起作用setDerivedStateFromProps吗?上面的代码和这样使用有什么区别useEffect

这会完全一样setDerivedStateFromProps吗?

0 投票
2 回答
264 浏览

javascript - Unexpected keyword 'true' while using `useState` in react?

Here i am trying to set the open prop of the MUIDrawer to true when the user clicks it but while setting the state i am getting an error "Unexpected keyword 'true' "

0 投票
0 回答
93 浏览

reactjs - React生命周期组件WillUnmount的调用顺序

我有一些问题......为什么我们有这样的 componentWillUnmount 序列?从父母到它的孩子。

有可能逆转并冒泡吗?从孩子到父母?

代码沙盒

0 投票
1 回答
1178 浏览

javascript - React Hook useCallback在调用时没有得到更新的状态

我正在开发这个应用程序,我双击页面并创建一个新项目。然后我通知 websockets 服务器将这个创建广播给所有其他收听它的用户。在另一个用户端,我必须添加这个新项目,所以每个人都会同步。

我正在使用反应钩子,这是我从头开始使用它的第一个应用程序。我在这个应用程序中遇到了几个类似的问题,但我选择了这个流程来说明基本问题。它必须涵盖大多数问题。

当我调用在useCallback“其他用户”端添加项目时,items状态为旧(空)。因此,无论我创建多少次项目,页面上都只会有一个,即我刚刚创建的那个。

这是代码示例:

具有doCreateItem项目依赖性。另一方面,useEffect依赖列表不包含主要内容,因为每次我从服务器收到新项目时doCreateItem它都会重新调用回调。useEffect也因为我希望这个效果只执行一次(在组件安装上)。我尝试将useEffect其一分为二,一个用于连接,另一个用于侦听器,但同样的情况发生了。

我实际上有几个像这样的问题。回调执行的次数超出了我的预期,或者回调中的状态未更新。

有人可以澄清我们应该如何解决这个问题吗?

提前致谢!

编辑

正如@Ross所建议的,我更改了setItems调用以接收回调并返回新状态。这有助于setItems依赖。但我仍然无法itemsdoCreateItem函数中读取。它总是空的。

我注意到的一件有趣的事情是,如果我停止使用useCallback并在每个渲染上重新创建函数,它就没有该函数的更新状态,但它确实在函数之外: