首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React + redux,组件通过redux-thunk获取数据并订阅它,但属性在更改时不会更新

React是一个用于构建用户界面的JavaScript库,而Redux是一个用于管理应用程序状态的JavaScript库。在React中使用Redux可以帮助我们更好地组织和管理应用程序的状态。

在React中,组件通过redux-thunk获取数据并订阅它,但属性在更改时不会更新的问题可能是由于以下几个原因导致的:

  1. 组件未正确连接到Redux的store:在使用Redux时,组件需要通过connect函数将自身连接到Redux的store,以便能够访问store中的状态和操作。确保组件已正确连接到store。
  2. 组件未正确订阅状态的更改:在组件中使用redux-thunk获取数据后,需要使用Redux的connect函数将组件连接到store,并使用mapStateToProps函数将需要的状态映射到组件的属性上。这样,当状态发生更改时,组件会自动更新。
  3. 组件未正确更新属性:在React中,组件的属性(props)是只读的,当属性发生更改时,组件不会自动更新。如果需要在属性更改时更新组件,可以在组件的生命周期方法componentDidUpdate中进行处理,比较前后属性的变化并执行相应的操作。

综上所述,要解决组件通过redux-thunk获取数据并订阅它,但属性在更改时不会更新的问题,需要确保组件正确连接到Redux的store,正确订阅状态的更改,并在需要时手动更新组件的属性。

对于React和Redux的更多详细信息,您可以参考腾讯云的相关文档和教程:

  • React官方文档:https://reactjs.org/
  • Redux官方文档:https://redux.js.org/
  • 腾讯云React产品介绍:https://cloud.tencent.com/product/react
  • 腾讯云Redux产品介绍:https://cloud.tencent.com/product/redux
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

高频React面试题及详解

等内容 componentDidMount: 组件装载之后调用,此时我们可以获取到DOM节点操作,比如对canvas,svg的操作,服务器请求,订阅都可以写在这个里面,但是记得componentWillUnmount...当React渲染一个组件时,它不会等待componentWillMount完成任何事情 React继续前进继续render,没有办法“暂停”渲染以等待数据到达。...setState 的批量更新优化也是建立“异步”(合成事件、钩子函数)之上的,原生事件和setTimeout 中不会批量更新“异步”中如果对同一个值进行多次setState,setState的批量更新策略会对其进行覆盖...: Context设计目的是为了共享那些对于一个组件树而言是“全局”的数据,例如当前认证的用户、主题或首选语言,对于跨越多层的全局数据通过Context通信再适合不过 发布订阅模式: 发布者发布事件,订阅者监听事件做出反应...获取Provider中的store,通过store.getState()获取整个store tree 上所有state 包装原组件: 将state和action通过props的方式传入到原组件内部wrapWithConnect

2.4K40

前端常见react面试题合集

Context 通过组件树提供了一个传递数据的方法,从而避免了每一个层级手动的传递 props 属性。... React 中,何为 stateState 和 props 类似,但它是私有的,并且完全由组件自身控制。State 本质上是一个持有数据决定组件如何渲染的对象。...:组件接受到新属性或者新状态的时候(可以返回 false,接收数据后不更新,阻止 render 调用,后面的函数不会被继续执行了)componentWillUpdate:组件即将更新不能修改属性和状态render...可以使用自定义事件通信(发布订阅模式)可以通过redux等进行全局状态管理如果是兄弟组件通信,可以找到这两个兄弟节点共同的父节点, 结合父子间通信方式进行通信。...较大的应用中追踪性能回归可能会很方便(3)React16.13.0支持渲染期间调用setState,仅适用于同一组件可检测冲突的样式规则记录警告废弃 unstable_createPortal,

2.4K30

字节前端面试被问到的react问题

Context 通过组件树提供了一个传递数据的方法,从而避免了每一个层级手动的传递 props 属性。...,异步任务(通常都是业务或获取数据任务)也不例外,而为了不将业务或数据相关的任务混入React组件中,就需要使用其他框架配合管理异步任务流程,如redux-thunkredux-saga等;Mobx是一个透明函数响应式编程的状态管理库...通过 reduxreact context 配合使用,借助高阶函数,实现了 react-reduxReact 中 refs 干嘛用的?...Refs 提供了一种访问render方法中创建的 DOM 节点或者 React 元素的方法。典型的数据流中,props 是父子组件交互的唯一方式,想要修改子组件,需要使用新的pros重新渲染。...可以使用自定义事件通信(发布订阅模式)可以通过redux等进行全局状态管理如果是兄弟组件通信,可以找到这两个兄弟节点共同的父节点, 结合父子间通信方式进行通信。为什么不直接更新 state 呢 ?

2.1K20

2022社招react面试题 附答案

React渲染⼀个组件时,它不会等待componentWillMount完成任何事情。React继续前进继续render,没有办法“暂停”渲染以等待数据到达。...,订阅都可以写在这个⾥⾯,但是记得componentWillUnmount中取消订阅更新阶段: getDerivedStateFromProps: 此⽅法更新个挂载阶段都可能会调⽤; shouldComponentUpdate...6、受控组件和非受控组件区别是啥? 受控组件React控制中的组件,并且是表单数据真实的唯一来源。 非受控组件是由DOM处理表单数据的地方,而不是 React 组件中。...尽管非受控组件通常更易于实现,因为只需使用refs即可从DOM中获取值,通常建议优先选择受控制的组件,而不是非受控制的组件。...通过使用React Profiler,可以使用这些方法前后对性能进行测量,从而确保通过进行给定的更改来实际改进性能。 8、讲下redux的⼯作流程?

2.1K10

前端高频react面试题

View以 store 为核心,可以把看成数据存储中心,但是他要更改数据的时候不能直接修改,数据修改更新的角色由Reducers来担任,store只做存储,中间人,当Reducers的更新完成以后会通过...store的订阅来通知react component,组件把新的状态重新获取渲染,组件中也能主动发送action,创建action后这个动作是不会执行的,所以要dispatch这个action,让store...通过this.props获取旧的属性通过nextProps获取新的props,对比两次props是否相同,从而更新组件自己的state。...这个问题就设计到了数据持久化, 主要的实现方式有以下几种:Redux: 将页面的数据存储redux中,重新加载页面时,获取Redux中的数据;data.js: 使用webpack构建的项目,可以建一个文件...在当前组件的 props中,包含 location属性对象,包含当前页面路由地址信息, match中存储当前路由的参数等数据信息。可以直接通过 this .props使用它们。

3.3K20

2021高频前端面试题汇总之React

hook是react16.8更新的新的API,让组件逻辑复用简洁明了,同时也解决了hoc和render props的一些缺点。 4. 对React-Fiber的理解,解决了什么问题?...这里会有些微不同,属性不会自动绑定到 React 类的实例上。...View 以 store 为核心,可以把看成数据存储中心,但是他要更改数据的时候不能直接修改,数据修改更新的角色由Reducers来担任,store只做存储,中间人,当Reducers的更新完成以后会通过...store的订阅来通知react component,组件把新的状态重新获取渲染,组件中也能主动发送action,创建action后这个动作是不会执行的,所以要dispatch这个action,让store...通过reducers去做更新React Component 就是react的每个组件

2K00

2022社招React面试题 附答案

hook是react16.8更新的新的API,让组件逻辑复用简洁明了,同时也解决了hoc和render props的一些缺点。 4. 对React-Fiber的理解,解决了什么问题?...这里会有些微不同,属性不会自动绑定到 React 类的实例上。...View 以 store 为核心,可以把看成数据存储中心,但是他要更改数据的时候不能直接修改,数据修改更新的角色由Reducers来担任,store只做存储,中间人,当Reducers的更新完成以后会通过...store的订阅来通知react component,组件把新的状态重新获取渲染,组件中也能主动发送action,创建action后这个动作是不会执行的,所以要dispatch这个action,让store...通过reducers去做更新React Component 就是react的每个组件

2K50

一天梳理完react面试高频题

react文档第一条就是声明式,React 使创建交互式 UI 变得轻而易举。为应用的每一个状态设计简洁的视图,当数据改变时 React 能有效地更新正确地渲染组件。...(2)简化可复用的组件React框架里面使用了简化的组件模型,彻底地使用了组件化的概念。React将整个UI上的每一个功能模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成更大的组件。...State 本质上是一个持有数据决定组件如何渲染的对象。...的单向数据流模式,所以props是从父组件传入子组件数据Redux 中异步的请求怎么处理可以 componentDidmount 中直接进⾏请求⽆须借助redux。...只对同级比较,跨层级的dom不会进行复用不同类型节点生成的dom树不同,此时会直接销毁老节点及子孙节点,新建节点可以通过key来对元素diff的过程提供复用的线索单节点diff单点diff有如下几种情况

4.1K20

2021高频前端面试题汇总之React

hook是react16.8更新的新的API,让组件逻辑复用简洁明了,同时也解决了hoc和render props的一些缺点。 3....React中,当prop或者state发生变化时,可以通过shouldComponentUpdate生命周期函数中执行return false来阻止页面的更新,从而减少不必要的render执行。...浅比较会忽略属性和或状态突变情况,其实也就是数据引用指针没有变化,而数据发生改变的时候render是不会执行的。如果需要重新渲染那么就需要重新开辟空间引用数据。...对 React Hook 的理解,的实现原理是什么 React-Hooks 是 React 团队 React 组件开发实践中,逐渐认知到的一个改进点,这背后其实涉及对类组件和函数组件两种组件形式的思考和侧重...通过对比,从形态上可以对两种组件做区分,它们之间的区别如下: 类组件需要继承 class,函数组件不需要; 类组件可以访问生命周期方法,函数组件不能; 类组件中可以获取到实例化后的 this,基于这个

2K00

一天梳理完react面试题

这种组件React中被称为受控组件受控组件中,组件渲染出的状态与它的value或checked属性相对应,react通过这种方式消除了组件的局部状态,使整个状态可控。...受控组件更新state的流程:可以通过初始state中设置表单的默认值每当表单的值发生变化时,调用onChange事件处理器事件处理器通过事件对象e拿到改变后的状态,更新组件的state一旦通过setState...而不是为每个状态更新编写一个事件处理程序。React官方的解释:要编写一个非受控组件,而不是为每个状态更新都编写数据处理函数,你可以使用 ref来从 DOM 节点中获取表单数据。...因为非受控组件将真实数据储存在 DOM 节点中,所以使用非受控组件时,有时候反而容易同时集成 React 和非 React 代码。...为了合并setState,我们需要一个队列来保存每次setState的数据,然后一段时间后执行合并操作和更新state,清空这个队列,然后渲染组件React 数据持久化有什么实践吗?

5.5K30

社招前端一面react面试题汇总

,而是给react用的,大概的作用就是给每一个reactNode添加一个身份标识,方便react进行识别,重渲染过程中,如果key一样,若组件属性有所变化,则react更新组件对应的属性;没有变化则不更新...React允许对 setState方法传递一个函数,接收到先前的状态和属性数据返回一个需要修改的状态对象,正如我们在上面所做的那样。...而在存在期的5个阶段,又不能确保生命周期方法一定会执行(如通过 shouldComponentUpdate方法优化更新等)。销毀期,组件即将被销毁,请求数据变得无意义。...当然可以通过 setState 的第二个参数中的 callback 拿到更新后的结果setState 的批量更新优化也是建立异步(合成事件、钩子函数)之上的,原生事件和 setTimeout 中不会批量更新...指出(组件)生命周期方法的不同componentWillMount -- 多用于根组件中的应用程序配置componentDidMount -- 在这可以完成所有没有 DOM 就不能做的所有配置,开始获取所有你需要的数据

3K20

高级前端react面试题总结

通过这样做, React 将会知道发生的确切变化,并且通过了解发生什么变化,只需绝对必要的情况下进行更新即可最小化 UI 的占用空间React Hooks平时开发中需要注意的问题和原因(1)不要在循环...componentWillMount方法的调用在constructor之后,render之前,在这方法里的代码调用setState方法不会触发重新render,所以一般不会用来作加载数据之用。...与组件上的数据无关的加载,也可以constructor里做,constructor是做组件state初绐化工作,并不是做加载数据这工作的,constructor里也不能setState,还有加载的时间太长或者出错...,通过调用this.setState()来更新你的组件状态,旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的,并不会触发额外的render调用。...使用好处: 在这个生命周期中,可以组件的render函数执行前获取新的props,从而更新组件自己的state。

4.1K40

MobX or Redux?

例如,组件常常在 componentDidMount 和 componentDidUpdate 中获取数据。...多数情况下,不可能将组件拆分为更小的粒度,因为状态逻辑无处不在。 Redux Redux 由 Flux 演变而来,受 Elm 的启发,避开了 Flux 的复杂性。...支持订阅 Store 的变更(subscribe(listener)); 4、异步流 由于 Redux 所有对 Store 状态的变更,都应该通过 Action 触发,异步任务(通常都是业务或获取数据任务...)也不例外,而为了不将业务或数据相关的任务混入 React 组件中,就需要使用其他框架配合管理异步任务流程,如 redux-thunkredux-saga、redux-promise 5、数据流向 [...,也应该要避免这些,这些都是相对而言,每个框架和库都有各自的实现,特色,及其适用场景,正如 Redux 流程复杂,熟悉流程后就更能把握的一些基础/核心理念,使用起来可能更有心得及感悟;而 Mobx

52100

前端react面试题(必备)2

: Context 设计⽬的是为了共享那些对于⼀个组件树⽽⾔是“全局”的数据,例如当前认证的⽤户、主题或⾸选语⾔,对于跨越多层的全局数据通过 Context 通信再适合不过发布订阅模式: 发布者发布事件...,订阅者监听事件做出反应,我们可以通过引⼊event模块进⾏通信全局状态管理⼯具: 借助Redux或者Mobx等全局状态管理⼯具进⾏通信,这种⼯具会维护⼀个全局状态中⼼Store,根据不同的事件产⽣...)状态(state)和属性(props)之间有何不同State 是一种数据结构,用于组件挂载时所需数据的默认值。...受控组件React 控制中的组件,并且是表单数据真实的唯一来源。非受控组件是由 DOM 处理表单数据的地方,而不是 React 组件中。...尽管非受控组件通常更易于实现,因为只需使用refs即可从 DOM 中获取值,通常建议优先选择受控制的组件,而不是非受控制的组件

2.3K20

React 进阶 - React Redux

# 状态管理应用场景 # 组件间共用数据 应用初始化时候,只请求一次数据,然后通过状态管理把数据存起来,需要数据组件只需要从状态管理中‘拿’就可以了。...单向数据流 整个 Redux数据流向都是单向的 state 只读 Redux 中不能通过直接改变 state ,来让状态发生变化,如果想要改变 state ,那就必须触发一次 action...# React-Redux 用法 React-Redux 是沟通 ReactRedux 的桥梁,主要功能体现在如下两个方面: 接受 Redux 的 Store,并把合理分配到所需要的组件订阅...中一方面用来订阅来自 state 变化,另一方面通知对应的组件更新 Provider 中的订阅器 subscription 为根订阅 Provider 的 useEffect 中,进行真正的绑定订阅功能...,如果相等,那么当前组件不需要更新,直接通知子代 Subscription ,检查子代 Subscription 是否更新,完成整个流程 # Redux 实现异步 redux-thunk redux-saga

90710

你要的 React 面试知识点,都在这了

容器组件是处理获取数据订阅 redux 存储等的组件。...componentWillUpdate() 组件接收到新的props或者state还没有render时被调用。初始化时不会被调用。...当Redux状态更改时,连接到Redux组件将接收新的状态作为props。当组件接收到这些props时,它将进入更新阶段并重新渲染 UI。 ?...redux-thunk是一个中间件。一旦它被引入到项目中,每次派发一个action时,都会通过thunk传递。如果它是一个函数,只是等待函数处理返回响应。如果它不是一个函数,只是正常处理。...sendEmailAPI是从组件中调用的函数,接受一个数据返回一个函数,其中dispatch作为参数。我们使用redux-thunk调用API apiservice,等待收到响应。

18.4K20

前端二面高频react面试题集锦_2023-02-23

shouldComponentUpdate 初始化 和 forceUpdate 不会执行 React 设计思路,的理念是什么?...react文档第一条就是声明式,React 使创建交互式 UI 变得轻而易举。为应用的每一个状态设计简洁的视图,当数据改变时 React 能有效地更新正确地渲染组件。...(2)简化可复用的组件 React框架里面使用了简化的组件模型,彻底地使用了组件化的概念。React将整个UI上的每一个功能模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成更大的组件。...shouldComponentUpdate:组件接受到新属性或者新状态的时候(可以返回 false,接收数据后不更新,阻止 render 调用,后面的函数不会被继续执行了) componentWillUpdate...= {result:''} } //通过ref设置的属性 可以通过this.refs获取到对应的dom元素 handleChange = () =>{ let

2.8K20

百度前端高频react面试题(持续更新中)_2023-02-27

受控组件更新state的流程: 可以通过初始state中设置表单的默认值 每当表单的值发生变化时,调用onChange事件处理器 事件处理器通过事件对象e拿到改变后的状态,更新组件的state 一旦通过...而不是为每个状态更新编写一个事件处理程序。 React官方的解释: 要编写一个非受控组件,而不是为每个状态更新都编写数据处理函数,你可以使用 ref来从 DOM 节点中获取表单数据。...因为非受控组件将真实数据储存在 DOM 节点中,所以使用非受控组件时,有时候反而容易同时集成 React 和非 React 代码。...componentWillMount方法的调用在constructor之后,render之前,在这方法里的代码调用setState方法不会触发重新render,所以一般不会用来作加载数据之用。...,通过this.props获取旧的属性通过nextProps获取新的props,对比两次props是否相同,从而更新组件自己的state。

2.3K30
领券