问题标签 [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.
reactjs - 我们如何在基于类的组件的 componentDidUpdate() 生命周期中停止重复调用,就像我们在 useEffect 挂钩中所做的那样?
当我使用基于类的组件时,我必须使用状态布尔值来指定何时开始获取和停止......我试图完成工作的事情很奇怪,但我仍然很想知道我们是否可以停止在 componentDidUpdate() 生命周期方法中也重复调用请求。
我知道这不是从生命周期进行请求调用的正确方法。也不要因此评判我......所以,请告诉我是否有人可以帮助我正确地做到这一点,或者这样做是否合法......
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 挂钩并在离开之前以某种方式卸载它。
reactjs - 在 ReactJS 中调用挂载函数
在 ReactJS 上加载组件时调用函数时出现问题。我尝试使用 componentDidMount() 并且编译时出错。请在下面检查我的代码。谢谢
reactjs - 是否聚合了多个 this.setState 调用的状态更改?
从理论上讲,我知道钩子中的状态变化setState
是聚合的,即如果我在同一个函数中多次调用它,就会收集状态的变化,然后状态只会改变一次。
this.setState
React 的 Component 类也是这种情况吗?例如,如果我想this.setState
在 componentDidMount 上添加多个调用?
谢谢。
reactjs - 当我们在 react 中点击 componentDidMount 时,组件安装在哪里?它是真正的 DOM 还是 VirtualDom?
你什么时候会在 react 中点击 componentDidMount 钩子?是在组件安装到虚拟 dom 还是实际 dom 时?
reactjs - redux props 两次接收数据
我正在使用 redux 来获取异步数据和响应。在下面的组件中,当我发布配方和从服务器时,我通过 redux 两次成功模式弹出窗口获得响应。减速器仅在我检查完所有内容后才运行,只有组件有问题。问题可能出在生命周期方法上。
reactjs - 您可以在功能组件(React)中使用 useEffect 复制静态 setDerivedStateFromProps 吗?
我正在阅读 React 的书(初学者书),但我不太确定如何复制这个生命周期静态函数setDerivedStateFromProps
这是具有类方法的代码(但我需要使用功能方法):
我看到了 React 文档,他们给出了一个例子。我不完全确定它的含义以及它是否对我有用,但是我尝试将其用作参考并写了以下内容:
上面的代码会起作用setDerivedStateFromProps
吗?上面的代码和这样使用有什么区别useEffect
:
这会完全一样setDerivedStateFromProps
吗?
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' "
javascript - React Hook useCallback在调用时没有得到更新的状态
我正在开发这个应用程序,我双击页面并创建一个新项目。然后我通知 websockets 服务器将这个创建广播给所有其他收听它的用户。在另一个用户端,我必须添加这个新项目,所以每个人都会同步。
我正在使用反应钩子,这是我从头开始使用它的第一个应用程序。我在这个应用程序中遇到了几个类似的问题,但我选择了这个流程来说明基本问题。它必须涵盖大多数问题。
当我调用在useCallback
“其他用户”端添加项目时,items
状态为旧(空)。因此,无论我创建多少次项目,页面上都只会有一个,即我刚刚创建的那个。
这是代码示例:
具有doCreateItem
项目依赖性。另一方面,useEffect
依赖列表不包含主要内容,因为每次我从服务器收到新项目时doCreateItem
它都会重新调用回调。useEffect
也因为我希望这个效果只执行一次(在组件安装上)。我尝试将useEffect
其一分为二,一个用于连接,另一个用于侦听器,但同样的情况发生了。
我实际上有几个像这样的问题。回调执行的次数超出了我的预期,或者回调中的状态未更新。
有人可以澄清我们应该如何解决这个问题吗?
提前致谢!
编辑
正如@Ross所建议的,我更改了setItems
调用以接收回调并返回新状态。这有助于setItems
依赖。但我仍然无法items
在doCreateItem
函数中读取。它总是空的。
我注意到的一件有趣的事情是,如果我停止使用useCallback
并在每个渲染上重新创建函数,它就没有该函数的更新状态,但它确实在函数之外: