使用redux时，React主组件被调用两次
当使用Redux时，React主组件被调用两次的原因可能是由于组件的重新渲染引起的。Redux是一种状态管理库，它可以帮助我们在应用程序中管理和共享状态。当Redux store中的状态发生变化时，与该状态相关的组件将会重新渲染。
在React中，组件的重新渲染是由组件的props或state的变化触发的。当Redux store中的状态发生变化时，Redux会通知与该状态相关的组件进行重新渲染。这可能会导致React主组件被调用两次。
为了解决这个问题，可以考虑以下几点：
- 检查Redux store中的状态变化：确保Redux store中的状态变化是预期的，并且没有其他不必要的状态变化。可以使用Redux DevTools来检查Redux store中的状态变化。
- 检查React组件的props和state：确保React组件的props和state没有不必要的变化。可以使用React开发者工具来检查组件的props和state的变化。
- 使用React的性能优化技术：可以使用React的性能优化技术来减少组件的重新渲染次数。例如，使用React.memo来优化组件的渲染，使用useCallback和useMemo来优化函数和计算结果的缓存。
- 检查Redux的使用方式：确保正确地使用Redux，并遵循Redux的最佳实践。例如，避免在组件中直接访问Redux store，而是使用connect函数或useSelector钩子来获取Redux store中的状态。
总结起来，当使用Redux时，React主组件被调用两次可能是由于组件的重新渲染引起的。为了解决这个问题，可以检查Redux store中的状态变化、React组件的props和state、使用React的性能优化技术，并确保正确地使用Redux。
相关·内容
1回答
Redux + Hooks useDispatch()在useEffect调用操作中执行两次
javascript、reactjs、redux、react-redux、react-hooks
我是redux & hooks的初学者。我正在处理表单，并试图通过useDispatch钩子调用一个操作，但它两次调用我的操作。import { fetchProfile } from '../../..from 'react';
import { connect } from 'react-re
浏览 7提问于2020-05-26得票数 3
回答已采纳
3回答
在componentWillMount中使用redux时，防止react组件渲染两次
reactjs、redux
我有一个React组件，它在其componentWillMount函数中调度redux状态更改。原因是，当组件被加载时，它需要从url (由react-router提供动力)获得id，并触发用该id的数据设置状态的动作。下面是组件： const { dispatch, paramsite
浏览 0提问于2015-12-18得票数 33
3回答
使用redux时，React主组件被调用两次
javascript、reactjs、redux、react-redux
我有一个react主组件，它在componentDidMount上调度redux操作，该操作将获取API数据。问题是:当我启动我的应用程序时，我的componentDidMount和主组件被执行了两次。因此，每次加载应用程序时，它都会进行2次API调用。API对我的总调用次数有限制，我不想达到我的限制。我已经尝试通过删除构造函数来修复这个问题，使用componentWillMount并没有解决问题。import React, { Co
浏览 41提问于2019-01-07得票数 0
1回答
React:功能组件呈现两次相同的分区
javascript、reactjs、redux
我正在尝试使用React和Redux制作一个web应用程序。还原器调用后端的api，此api返回类别的Json。但我意识到，当我从组件函数调用这个还原器和状态时，因为某个原因，包含状态的div被呈现了两次。在第一个呈现中，类别的json数组不存在，而在第二个呈现中，类别的json数组存在。这是我的组件代码：
import React, { useRef, useEffect} from '
浏览 3提问于2020-05-19得票数 0
回答已采纳
1回答
为什么在componentWillReceiveProps之前调用mapStateToProps两次？
reactjs、redux、react-redux
我有一个action文件，它连续调用两个action： dispatch(actions.navigateToUrldefault connect(state => ({ })然后，我有一个每次更新state时都会命中的我可以添加一个setTimeout，在action中的第二个dispatch周围没有等待时间，然后我两次</
浏览 2提问于2017-09-09得票数 1
2回答
测试连接的Redux组件时的提示
javascript、reactjs、testing、react-redux、enzyme
我已经在下面粘贴了我的组件，这是非常，非常基本的。挂载组件时，它基本上会调用API操作，该操作从fetchMessage返回一条消息。我完全不知道从哪里开始测试这个组件。我知道我想测试一下：2)调用props中的fetchMessage函数我已经尝试设置了我的测试文件，就像你在下面看到的那样import React, { Component, Pro
浏览 2提问于2017-01-04得票数 0
1回答
react-router-redux推送与redux-batched action不兼容？
reactjs、react-redux、react-router-redux、redux-batched-actions
我正在构建一个react&redux应用程序，并且遇到了以下问题:在我的一个组件中，我想通过编程导航到另一个页面，并显示一个模式。我发现在我的应用程序中使用两次操作并不能很好地工作，因为状态被更新了两次(导致我的模式渲染了两次，这会导致它消失)。因此，我尝试使用redux-batched-actions来更新一次状态，方法是使用两个函数("push“和"openModal
浏览 4提问于2017-02-22得票数 1
1回答
存储在onClick函数中不更新
javascript、reactjs、redux
我正在经历这个奇怪的问题，我的react存储正在更新，但在调用操作的函数中没有更新。在console.log(this.props)函数中对onClick进行的所有调用都显示状态没有变化，但是在测试结束时添加setTimeout(() => {console.log(this.props组件函数代码 console.log(this.props.active); // undefined
if (this.props.active === u
浏览 0提问于2016-10-16得票数 3
回答已采纳
1回答
反应-Redux:如何设置状态？
reactjs、redux、redux-reducers
我试图理解其他人的代码，但很难理解Redux和Redux之间的交互。然后逻辑返回到React页面(下面是3点)。现在，我希望能够在Redux存储中找到前面提到的数据。但是，我找不到任何地方列出的数据..
浏览 4提问于2022-03-19得票数 0
回答已采纳
1回答
当上下文被更改时，使用上下文的子组件不应该自动更新自己吗？
javascript、reactjs、redux、react-redux
为了测试目的，我有以下结构import { Provider } from 'react-redux';import LocalizedComponent from '.，它将一个简单的表示组件封装成一个本地化组件。但是，当我分派一个在状态下更改language的操作时，组
浏览 2提问于2017-03-27得票数 0
回答已采纳
1回答
如何在React/Redux中连接自定义通知系统？
reactjs、asynchronous、redux
我正在React/Redux中创建一个web应用程序，而且我对这个框架还很陌生。到目前为止，我已经创建了一个SignIn视图组件，它将调用signInUser操作创建者。此操作使用thunk在user-actions.js文件中解析/拒绝AJAX调用时分派适当的操作。
另外，我还创建了一个Notification视图组件。当AJAX请求被拒绝时，我希望Notification组件更新并显示错误。当
浏览 0提问于2017-05-23得票数 1
回答已采纳
1回答
每当触发react-intl更新操作时，redux表单都会重新挂载
reactjs、redux、redux-form、react-intl
我将我的应用程序和redux表单放在IntlProvider组件中，就像这样： <IntlProvider></IntlProvider> 问题是，每当我试图通过调用updateIntl操作来更改应用程序语言来更改区域设置值时，redux form组件都会再次被重新挂载，并重新设置表单中的所有状态和属性。我正在使用react-intl-redu
浏览 14提问于2019-05-14得票数 0
回答已采纳
1回答
使用redux时响应生命周期
reactjs、redux
在react中，当应用程序启动时，它将运行ComponentWill/DidMount，然后对于每个this.setState()，组件将运行componentWill/DidUpdate。在redux中，商店将订阅这样的呈现函数，function run(){
ReactDOM.render(<App /then for every dispatch() action, store/reduc
浏览 3提问于2016-07-21得票数 0
回答已采纳
2回答
如何在第一次呈现时使用React加载带有道具的子组件
reactjs、react-native、redux、react-redux
在中，我在功能组件中使用React来设置Redux存储上的状态。然后，我尝试通过名为prop的timestamp将存储的值传递给子组件。问题是，子组件利用了DateTimePicker组件(来自react-native-modal-datetime-picker)，并且当它最初呈现timestamp支柱时没有定义，这会导致它出错。-20T12:21:52.874Z,
"time": "01:21:52
浏览 4提问于2019-09-19得票数 5
回答已采纳
2回答
useNavigate阻塞createAsyncThunk，redux工具箱中的其余内容。
redux-toolkit
我试图在redux工具箱中访问useNavigate hooke在createAsyncThunk中，如下所示：
export const onHandleBookmark = createAsyncThunk
浏览 12提问于2022-03-14得票数 1
回答已采纳
1回答
反应-路由器改变我的组件从useEffect，如何减轻这一点？
reactjs、react-hooks、react-redux、react-router
这是非常有问题的，因为当一个人转到我的路由player/example时，我的App组件呈现Player组件，然后当用户状态从useEffect更新时，它再次在路由上呈现Player组件。因此，运行该组件两次，并且我的Player组件中的任何Player都像获取数据一样，调用数据两次！总之，Player组件基本上呈现
浏览 5提问于2022-07-11得票数 2
4回答
响应重新呈现重置组件的悬停状态
reactjs
当我在上面盘旋时，我将组件设置为1.2x，但是，当组件在我盘旋时被重新呈现时，它会失去悬停状态，然后变得很小，然后返回到1.2x (见图)。我希望它保持规模。我怎么才能解决这个问题？
浏览 0提问于2018-10-11得票数 1
回答已采纳
1回答
混合Redux和useEffect钩子
reactjs、react-redux
首先，当redux分派被执行时，一些组件通过useSelector使用属性。然后，在功能组件已经被重新呈现之后，将应用一个useEffect钩子来更新某些属性的状态。此更新将再次重新触发渲染。例如，在我的例子中，下面的控制台日志打印了两次。 问:我是否应该删除useEffect和useState并将其集成到redux的存储中？import {useSelector} from "react-redux";
impo
浏览 9提问于2020-08-05得票数 0
1回答
如何避免由于redux存储、更新/向连接组件传播redux状态的延迟而导致的重复操作分发？
reactjs、redux、react-router-dom
我正在开发一个使用React的应用程序-路由器和Redux。}}
登录页面使用login组件呈现，该组件连接到redux存储并检查布尔isSignedIn。oAuth流由GoogleAuth组件处理，该组件检查用户在每次呈现页面时是否签名
浏览 2提问于2022-02-11得票数 0
回答已采纳
1回答
React redux reducer，因为UseEffect依赖导致无限循环
javascript、reactjs、redux
我只是深入研究react。但是useEffect react钩子还是把我搞糊涂了。我知道我可以将依赖项作为数组传递给它，以控制组件的呈现。我已经使用道具和本地状态来做，它是有效的。让我感到困惑的是，当我将redux reducer作为依赖项传递时，它会导致呈现组件的无限循环。case GET_USERS : { }} 据我所知，用户一开始是一个空数组
浏览 150提问于2021-02-28得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
