文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React-Redux :在父更改中的mapStateToProps上重新渲染子组件不起作用

React-Redux是一个用于在React应用中管理状态的库。它结合了React和Redux，提供了一种可预测、可维护和可扩展的状态管理解决方案。

在React-Redux中，通过使用connect函数将React组件连接到Redux的store。connect函数接受两个参数：mapStateToProps和mapDispatchToProps。其中，mapStateToProps是一个函数，用于将store中的状态映射到组件的props上；mapDispatchToProps是一个函数或对象，用于将action创建函数映射到组件的props上。

当父组件中的mapStateToProps发生变化时，React-Redux会检测到这个变化，并重新渲染子组件。但是，如果在父组件中的mapStateToProps中的返回值没有发生变化，React-Redux会认为子组件的props没有变化，从而不会重新渲染子组件。

这种情况下，可能有以下几个原因导致子组件不重新渲染：

  1. mapStateToProps返回的对象或数组没有发生变化：React-Redux使用浅比较来检测props是否发生变化，如果返回的对象或数组没有发生引用变化，即使其中的值发生了变化，子组件也不会重新渲染。解决方法是确保返回的对象或数组是一个新的引用。
  2. 父组件没有重新渲染：如果父组件没有重新渲染，那么子组件也不会重新渲染。可以检查父组件的shouldComponentUpdate方法或React.memo来确保父组件的重新渲染。
  3. 子组件的shouldComponentUpdate或React.memo阻止了重新渲染：如果子组件中的shouldComponentUpdate方法返回false，或者使用了React.memo并且props没有发生变化，那么子组件不会重新渲染。可以检查子组件的shouldComponentUpdate方法或React.memo的使用。

总结起来，如果在父组件中的mapStateToProps上重新渲染子组件不起作用，可以检查返回的对象或数组是否发生了引用变化，确保父组件重新渲染，以及检查子组件的shouldComponentUpdate方法或React.memo的使用。

腾讯云相关产品和产品介绍链接地址：

  • 腾讯云官网：https://cloud.tencent.com/
  • 云服务器CVM：https://cloud.tencent.com/product/cvm
  • 云数据库MySQL：https://cloud.tencent.com/product/cdb_mysql
  • 云原生应用引擎TKE：https://cloud.tencent.com/product/tke
  • 人工智能平台AI Lab：https://cloud.tencent.com/product/ailab
  • 物联网平台IoT Hub：https://cloud.tencent.com/product/iothub
  • 移动开发平台MPS：https://cloud.tencent.com/product/mps
  • 云存储COS：https://cloud.tencent.com/product/cos
  • 区块链服务BCS：https://cloud.tencent.com/product/bcs
  • 元宇宙服务：https://cloud.tencent.com/product/metaspace
相关搜索:子组件在父组件重新渲染时重新渲染父组件更改属性时，子组件不会重新渲染父组件和子组件中的MapStateToProps和MapDispachToProps不起作用在父组件上无限角度重新渲染React函数组件的父状态更改不会重新渲染子组件当React中的父状态更改时停止重新渲染子组件在svelte中重新渲染子组件如何从带有钩子的子组件重新渲染父组件？React JSX:父组件的重新渲染重新挂载子组件正常吗？父组件中的状态更改后重新呈现组件子组件根据子组件中更改的父组件状态在父组件上执行代码在不重新渲染子组件的情况下反应父组件的setStateVueJS -在渲染子组件之前等待父组件中的更新()父组件中的道具更改后，React子组件不会重新呈现在react本机中渲染子组件而不是父组件如何在父组件中获得渲染的子组件？React用于更改父组件从子组件的状态而不重新渲染所有子组件的最佳实践？父组件中的类在子组件中不起作用在React中，我如何知道哪个父组件渲染子组件？如何使用react和typescript在父组件中渲染子组件？
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

vue中父组件传值给子组件，父组件值改变，子组件不能重新渲染

1在子组件中用watch()监听值的改变，不同的类型的要用不同的监听方法 props: { echartStyle: { type: Object, default() {...opinionData:{ handler(newValue,oldValue){ this.getChange(); }, deep:true } }, 2 在父组件中用...$refs.str.method()在值改变的地方来调用子组件中的方法 来 重新渲染（暂时使用有bug，不能够及时渲染,父组件值已经改变了，但是子组件值仍然没有改变，不能够及时渲染） 这个方法感觉props...’接收数据在调用方法之后，明明父组件的值已经改变了，但是父组件在调用子组件方法时，数据仍然没有 接收到，调用之后才接收到，这个方法暂且没用，应该是声明ref的时候声明的是当前组件的实例，然后调用时调用的也是值未改变时的属性...$refs.pieChart.getChange(); } }, 3 在子组件上使用 v-if =”flag” （谢谢各位老哥的建议） 初始flag:true 修改data时 changData(

2.9K30

手写一个React-Redux，玩转React的Context API

但是下面还想讲一下React-Redux是怎么保证组件的更新顺序的，因为源码中很多代码都是在处理这个。...在父->子这种单向数据流中，如果他们的一个公用变量变化了，肯定是父组件先更新，然后参数传给子组件再更新，但是在Redux里，数据变成了Redux -> 父，Redux -> 子，父与子完全可以根据Redux...connect在判断是否变化的时候使用的是浅比较，也就是只比较一层，所以在mapStateToProps和mapDispatchToProps中不要反回多层嵌套的对象。...为了解决父组件和子组件各自独立依赖Redux，破坏了React的父级->子级的更新流程，React-Redux使用Subscription类自己管理了一套通知流程。...只有连接到Redux最顶级的组件才会直接注册到Redux store，其他子组件都会注册到最近父组件的subscription实例上。

3.7K21

    • Taro中的一个父组件中map渲染子组件列表的时候，问题

    其实问题还是自己想偷懒而且不注意导致的，可以说是小程序页面和组件的界限 我们在开发的时候，组件和页面一定要分开，如果是组件的话，就一定不要当成页面组件在pages中配置，就拿列表组件来说 场景：我一个列表...这样就导致了首次渲染数据空白！！！！...但是在开发者工具看的时候，其实数据已经是有的，百思不得其解啊，于是就放弃了，差不多首次就是这样 image.png 可以看到，appData中数据是正常的，但是第一次的map展示就是有问题，值出不来，...就是简单的react 列表渲染一个子组件 image.png 于是.......过了十天 我还是放不下！...【灵机一动，会不会是小程序中页面和组件之间的边界出了问题呢】 我就去掉了 image.png

    2K20

    React总结概括

    setState会自动调用render函数，触发视图的重新渲染，如果仅仅只是state数据的变化而没有调用setState，并不会触发更新。...在这种假设之上进行逐层的比较，如果发现对应的节点是不同的，那就直接删除旧的节点以及它所包含的所有子节点然后替换成新的节点。如果是相同的节点，则只进行属性的更改。...constructor是构造器，在实例化对象时调用，super调用了父类的constructor创造了父类的实例对象this，然后用子类的构造函数进行修改。...触发render函数重新渲染dom。...解决通信问题的方法很多，如果只是父子级关系，父级可以将一个回调函数当作属性传递给子级，子级可以直接调用函数从而和父级通信。

    1.2K20

    实现redux

    React里父子组件可以通过props通信，兄弟组件通信需要把数据传递给父组件，再由父组件传递给另一个子组件。以兄弟组件通信为需求，写一个Redux。 问题 ?...兄弟组件通信 首先分析这个需求，点击button，改变数字，Number组件重新渲染。 ? 可抽象为，派发一个动作，改变状态，执行方法。 ?...上面代码里可以看出组件里的许多代码是重复的，可以进一步抽象组件，最后抽象成React-Redux。...React-Redux里要实现一个外层组件，负责传递store和渲染子组件，功能比较简单 export default class Provider extends Component { static...高阶组件负责把store上的state和dispatch作为props传递给需要渲染的组件，还有实现生命周期函数里的公共功能。

    74720

    react-redux 开发实践与学习分享

    基础上开发出来，与flux的主要区别是只有一个store，关于store，后文会详述。...在各大框架中均可使用，当然各个框架也有自己再度封装的状态管理库，如angular的ngrx，vue的vuex，而本文主要介绍的是react的react-redux。 示例介绍 ?...通过路由进入主页面，主页面渲染的dom代码为： render() { // 这个组件是一个包裹组件，所有的路由跳转的页面都会以this.props.children的形式加载到本组件下...在mapStateToProps这个取值函数中，取的也就是相关reducer中返回的值。 触发相关action后的主页控制台： ?...至此，就完成了react-redux对于父子组件的通信，由子组件向上推送信息至父组件，触发相关的操作。

    90130

    React 进阶 - React Redux

    ，那么会将 Redux state 中的数据，映射到当前组件的 props 中，子组件可以使用消费 当需要的 state ，有变化的时候，会通知当前组件更新，重新渲染视图 可以利用 connect 提供的功能...)(Index) 通过 mapStateToProps 获取指定 state 中的内容，然后渲染视图 # React-Redux 实现组件通信 function ComponentA({ toCompB...中一方面用来订阅来自 state 变化，另一方面通知对应的组件更新 在 Provider 中的订阅器 subscription 为根订阅器 在 Provider 的 useEffect 中，进行真正的绑定订阅功能...中的订阅器是最根部的订阅器，可以通过 trySubscribe 和 addNestedSub 方法可以看到 如果父组件是一个 connect ，子孙组件也有 connect ，那么父子 connect...的 Subscription 也会建立起父子关系 上订下发 在调用 trySubscribe 的时候，能够看到订阅器会和上一级的订阅器通过 addNestedSub 建立起关联 当 store 中

    92610

    在 Vue 中，子组件为何不可以修改父组件传递的 Prop

    所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。...这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。 额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。...在initProps的时候，在defineReactive时通过判断是否在开发环境，如果是开发环境，会在触发set的时候判断是否此key是否处于updatingChildren中被修改，如果不是，说明此修改来自子组件...需要特别注意的是，当你从子组件修改的prop属于基础类型时会触发提示。 这种情况下，你是无法修改父组件的数据源的， 因为基础类型赋值时是值拷贝。...你直接将另一个非基础类型（Object, array）赋值到此key时也会触发提示(但实际上不会影响父组件的数据源)， 当你修改object的属性时不会触发提示，并且会修改父组件数据源的数据。

    2.3K10

    父组件中vuex方法更新state，子组件不能及时更新并渲染的解决方法

    场景： 我实际用到的是这样的，我父组件引用子组件related,父组件调用获取页面详情的方法，更新了state值related，子组件根据该related来渲染相关新闻内容，但是页面打开的时候总是先加载子组件...，子组件在渲染的时候还没有获取到更新之后的related值，即使在子组件中watch该值的变化依然不能渲染出来子组件的相关新闻内容。...我的解决办法： 父组件像子组件传值，当父组件执行了获取页面详情的方法之后，state值related更新，然后传给子组件，子组件再进行渲染，可以正常获取到。...父组件代码： <router-link to="/" slot=...$refs.hotComment.height; console.log(this.hotCommentScrollTop); }, } } 子组件related.vue

    2.2K40

    React进阶(6)-react-redux的使用

    前言 撰文:川川 您将在本文当中学习到 react-redux是什么,解决什么问题 UI组件以及容器组件 react-redux中两个重要的API,Provider以及connect mapStateToProps...等),使用它可以更好的组织和管理我们的代码,遵循一定的组件拆分规范,在React中更方便的使用Redux 关系: 它不是必须的,在实际项目中,可选用.是使用Redux还是使用react-redux,取决于你自己...这样react中任何组件都可以通过context获取store 只要被这个 Provider组件包裹了,那么它内部的子组件就有能力接收到store，内部的组件都有能力获取store的数据的 这样也就意味着我们可以在任何一个组件里利用...综归来说, connect做了两件事情: 把store上的状态转换为内层的UI组件(傻瓜组件)的props 把内层UI组件(无状态组件)中的用户触发的动作转化为派送个store的动作,前者(mapStateToProps...mapStateToProps会订阅 Store，每当 state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。

    2K10

    React进阶(6)-react-redux的使用

    image.png 前言 您将在本文当中学习到 react-redux是什么,解决什么问题 UI组件以及容器组件 react-redux中两个重要的API,Provider以及connect mapStateToProps...,遵循一定的组件拆分规范,在React中更方便的使用Redux 关系: 它不是必须的,在实际项目中,可选用.是使用Redux还是使用react-redux,取决于你自己,项目组成员的熟悉程度,适合自己的才是最好的...react中任何组件都可以通过context获取store 只要被这个 Provider组件包裹了,那么它内部的子组件就有能力接收到store，内部的组件都有能力获取store的数据的 这样也就意味着我们可以在任何一个组件里利用...综归来说, connect做了两件事情: 把store上的状态转换为内层的UI组件(傻瓜组件)的props 把内层UI组件(无状态组件)中的用户触发的动作转化为派送个store的动作,前者(mapStateToProps...mapStateToProps会订阅 Store，每当 state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。

    2.2K00

    前端面试指南之React篇（一）

    组件之间传值父组件给子组件传值 在父组件中用标签属性的=形式传值 在子组件中使用props来获取值子组件给父组件传值 在组件中传递一个函数 在子组件中用props来获取传递的函数，然后执行该函数...在执行函数的时候把需要传递的值当成函数的实参进行传递兄弟组件之间传值 利用父组件 先把数据通过 【子组件】===》【父组件】 然后在数据通过 【父组件】===〉【子组件】 消息订阅 使用PubSubJs...mapStateToProps（state，ownProps）中带有两个参数，含义是∶state-store管理的全局状态对象，所有都组件状态数据都存储在该对象中。...componentWillReceiveProps在初始化render的时候不会执行，它会在Component接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染。...用法：在父组件上定义getChildContext方法，返回一个对象，然后它的子组件就可以通过this.context属性来获取import React,{Component} from 'react'

    73050
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券