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

为什么我的react组件在发送更改redux存储的操作后没有重新呈现?

在React中,当Redux存储发生更改时,组件不会自动重新呈现。这是因为Redux的设计理念是通过触发动作(action)来改变存储状态,而不是直接修改组件的状态。因此,需要在组件中订阅Redux存储的更改,并在存储发生变化时手动更新组件。

要解决这个问题,你可以使用React-Redux库提供的connect函数来连接组件和Redux存储。connect函数将会自动订阅Redux存储的更改,并将存储中的数据作为props传递给组件。当存储发生变化时,connect函数会自动重新渲染组件。

以下是一个示例代码,展示了如何使用connect函数连接组件和Redux存储:

代码语言:txt
复制
import React from 'react';
import { connect } from 'react-redux';

// 定义一个React组件
class MyComponent extends React.Component {
  render() {
    // 在组件中使用Redux存储的数据
    const { data } = this.props;

    return (
      <div>
        {/* 渲染数据 */}
        {data}
      </div>
    );
  }
}

// 定义一个函数,将Redux存储的状态映射为组件的props
const mapStateToProps = (state) => {
  return {
    data: state.data // 假设Redux存储中有一个名为data的状态
  };
};

// 使用connect函数连接组件和Redux存储
export default connect(mapStateToProps)(MyComponent);

在上述代码中,我们首先导入了React和connect函数。然后,定义了一个名为MyComponent的React组件。在组件中,我们使用this.props来访问Redux存储中的数据。接下来,我们定义了一个名为mapStateToProps的函数,它将Redux存储的状态映射为组件的props。最后,我们使用connect函数将组件和Redux存储连接起来,并导出连接后的组件。

通过这样的连接,当Redux存储发生更改时,MyComponent组件将会自动重新渲染,并使用最新的存储数据进行呈现。

推荐的腾讯云相关产品:腾讯云云开发(Tencent Cloud CloudBase),它是一款云原生的全托管后端云服务,提供了前后端一体化的开发框架和工具链,可以帮助开发者快速构建和部署云端应用。您可以通过以下链接了解更多信息:腾讯云云开发

请注意,以上答案仅供参考,具体的解决方案可能因实际情况而异。在实际开发中,您可能需要进一步调查和排查代码中的其他问题,例如是否正确触发了Redux动作、是否正确配置了Redux存储等。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【19】进大厂必须掌握面试题-50个React面试

无论何时任何基础数据发生更改,整个UI都将以虚拟DOM表示形式重新呈现。 然后计算先前DOM表示和新DOM表示之间差异。...条件 state Properties 1.从父组件接收初始值 是 是 2.父组件可以更改没有 是 3.组件内部设置默认值 是 是 4.内部组件变化 是 没有 5.设置子组件初始值 是 是 6...React组件生命周期分为三个不同阶段: 初始渲染阶段: 这是组件即将开始其生命周期并进入DOM阶段。 更新阶段: 组件添加到DOM,只有更改属性或属性时,它才有可能更新和重新渲染。...Flux Redux 1.存储包含状态和更改逻辑 1.存储更改逻辑是分开 2.有多家商店 2.只有一家商店 3.所有商店都断开连接并保持平坦 3.带有分层减速器单店 4.有单身派遣员 4.没有调度员概念...所述 标签在使用时匹配以顺序次序中定义路由类型化URL。找到第一个匹配项,它将呈现指定路线。从而绕过其余 路线。 48.为什么我们React中需要一个Router?

11.2K30

必须要会 50 个React 面试题(下)

这些 key 必须是唯一数字或字符串,React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序性能。 React Redux 34. MVC框架主要问题是什么?...使用 Redux 开发应用易于测试,可以不同环境中运行,并显示一致行为。 37. Redux遵循三个原则是什么? 单一事实来源:整个应用状态存储单个 store 中对象/状态树里。...Redux 使用 “Store” 将程序整个状态存储同一个地方。因此所有组件状态都存储 Store 中,并且它们从 Store 本身接收更新。...使用时, 标记会按顺序将已定义 URL 与已定义路由进行匹配。找到第一个匹配项,它将渲染指定路径。从而绕过其它路线。 48. 为什么需要 React路由?...主题 常规路由 React 路由 参与页面 每个视图对应一个新文件 只涉及单个HTML页面 URL 更改 HTTP 请求被发送到服务器并且接收相应 HTML 页面 仅更改历史记录属性 体验 用户实际每个视图不同页面切换

3.5K21

前端状态管理框架之Redux

应用程序都需要有App state(应用程序状态),不论是一个需要用户登录应用,要有全局记录着用户登录状态,或是应用程序中不同操作介面(组件)或各种功能上数据沟通,都需要用到它。...另外在组件树状阶层结构,父组件(拥有者)与子组件(被拥有者)关系上,子组件是只能由父组件以props(属性)来传递属性值,子组件自己本身无法更改自己props,这也是为什么一开始在学习React时...,都会看到大部份例子只有最上层组件有state,而且都是由它来负责进行当数据改变时重新渲染工作,子组件通常只有负责呈现数据。...,从在网页上呈现操作介面组件,被触发事件,传送动作到发送器,再到store,最后进行整个应用重新渲染,都是往单一个方向运行。...想原因之一,是要标准化Action(动作)规格,也就是所有应用程序中组件,都得要按照这些动作来触发事件,发送器中注册callbacks(回调)也是要写成处理同一种规格动作。

1.1K20

前端高频react面试题

来担任,store只做存储,中间人,当Reducers更新完成以后会通过store订阅来通知react component,组件把新状态重新获取渲染,组件中也能主动发送action,创建action...React Hooks 限制主要有两条:不要在循环、条件或嵌套函数中调用 Hook; React 函数组件中调用 Hook。那为什么会有这样限制呢?...这个问题就设计到了数据持久化, 主要实现方式有以下几种:Redux: 将页面的数据存储redux中,重新加载页面时,获取Redux数据;data.js: 使用webpack构建项目,可以建一个文件...这样做, React会知道发生的确切变化,并且通过了解发生变化绝对必要情况下进行更新DOM,即可将因操作DOM而占用空间最小化。React中setState第二个参数作用是什么?...它们是只读组件,必须保持纯,即不可变。它们总是整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流,通常用于呈现动态生成数据。

3.3K20

「前端架构」Grab前端学习指南

这使得大规模重构过程中很容易对组件进行移位,只要向组件提供相同支持即可。 高性能——您可能听说过React使用虚拟DOM(不要与影子DOM混淆),当状态发生变化时,它会重新呈现所有内容。...为什么需要虚拟DOM?虽然现代JavaScript引擎速度很快,但从DOM读写却很慢。React在内存中保持DOM轻量级虚拟表示。重新呈现一切是一个误导术语。...React中,它实际上是指重新呈现DOM在内存中表示,而不是实际DOM本身。当组件底层数据发生更改时,将创建一个新虚拟表示,并与以前表示进行比较。...声明式编程中工作得很好——存储可以向视图发送更新,而不需要指定如何在状态之间转换视图。 由于Flux本身不是一个框架,开发人员已经尝试了很多Flux模式实现。...因为定义了明确职责和接口,所以React组件Redux操作/缩减器相对容易测试也很有帮助。对于React组件,我们可以测试给定一些道具,呈现所需DOM,并在某些模拟用户交互时触发回调。

7.4K20

高级前端react面试题总结

为什么?对于异步请求,最好放在componentDidMount中去操作,对于同步状态改变,可以放在componentWillMount中,一般用比较少。...所谓 Pre-commit,就是说在这个阶段其实还并没有去更新真实 DOM,不过 DOM 信息已经是可以读取了;Commit 阶段:在这一步,React 会完成真实 DOM 更新工作。...该函数会在setState设置成功,且组件重新渲染调用。合并nextState和当前state,并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新主要方法。...该函数会在replaceState设置成功,且组件重新渲染调用。总结: setState 是修改其中部分状态,相当于 Object.assign,只是覆盖,不会减少原来状态。...react组件划分业务组件技术组件?根据组件职责通常把组件分为UI组件和容器组件。UI 组件负责 UI 呈现,容器组件负责管理数据和逻辑。

4.1K40

你必须知道react redux 陷阱

react redux介绍 React ReduxRedux 官方 React UI 绑定层。它允许您 React 组件Redux 存储中读取数据,并将操作分派到存储以更新状态。...接下来,详细说一下,他们发生条件: 陈旧props触发条件: 选择器函数依赖于该组件 props 来提取数据 作为一个动作结果,父组件重新渲染并传递新道具 但是这个组件选择器函数在这个组件有机会用这些新道具重新渲染之前执行...不了解基础概念,看一看官方链接: Basic Selector Concepts 其中前两个操作是我们经常使用,最后一个没有渲染之前重新执行,恐怕只有回调事件(网络访问,异步事件回调等)才会满足。...陈旧props触发条件: 多个嵌套连接组件第一遍中安装,导致子组件在其父组件之前订阅商店 调度一个从存储中删除数据操作,例如待办事项 结果,父组件将停止渲染该子组件 但是,因为子项先订阅,所以它订阅会在父项停止呈现之前运行...以上,就是关于react redux 陷阱分享。欢迎交流,提建议。拜拜。

2.5K30

阿里前端二面常考react面试题(必备)_2023-02-28

react 虚拟dom是怎么实现 图片 首先说说为什么要使用Virturl DOM,因为操作真实DOM耗费性能代价太高,所以react内部使用js实现了一套dom结构,每次操作和真实dom之前...一旦有插入动作,会导致插入位置之后列表全部重新渲染 这也是为什么渲染列表时为什么要使用唯一 key。...主要解决问题: 单纯Redux只是一个状态机,是没有UI呈现react- redux作用是将Redux状态机和ReactUI呈现绑定在一起,当你dispatch action改变state时候...props 是不可修改,所有 React 组件都必须像纯函数一样保护它们 props 不被更改。 state 是组件中创建,一般 constructor中初始化 state。...,这样我们手动同步dom和数据成本就越来越高,而且频繁操作dom,也使我们页面的性能慢慢降低。

2.8K30

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

没有副作用,例如设置全局状态,更改应用程序状态,它总是将参数视为不可变数据。 想使用 appendAddress 函数向student对象添加一个地址。...容器组件是处理获取数据、订阅 redux 存储组件。...这是一种用于生成可重用组件强大技术。 Props 和 State Props 是只读属性,传递给组件呈现UI和状态,我们可以随时间更改组件输出。...如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。...匹配时,更新对应内容返回新 state。 当Redux状态更改时,连接到Redux组件将接收新状态作为props。当组件接收到这些props时,它将进入更新阶段并重新渲染 UI。 ?

18.4K20

设计师都能懂 Redux 指南

请不要用 Google 搜索 花哨后端东西 听说过它,但我不知道它是什么,这可能是一个 React 框架 是一种 React 应用中存储管理状态更好方式 这个问题,问过 40 多位设计师,以上是他们经典回答...目标是帮助像你们这样设计师。即使您以前没有写过一行代码,认为理解 Redux仍然是可能、有益和有趣。 什么是 Redux 超高水平上,Redux 是开发人员用来简化他们工作工具。...获取和存储数据 React中,我们将UI分解为组件。这些组件都可以分解为更小组件。...它能够为你完成大量繁重工作。。 Redux 可以非常轻松地通过网络发送正在发生事情。 接收另一个用户另一台机器上执行操作,重放更改并与本地发生操作合并是很简单。...,而不用等信息从客户端发送到服务器,完成更新确认,再从服务器返回客户端这一个来回完成再做响应。

1.6K10

从设计角度看 Redux

请不要用 Google 搜索 花哨后端东西 听说过它,但我不知道它是什么,这可能是一个 React 框架 是一种 React 应用中存储管理状态更好方式 这个问题,问过 40 多位设计师,以上是他们经典回答...目标是帮助像你们这样设计师。即使您以前没有写过一行代码,认为理解 Redux仍然是可能、有益和有趣。 什么是 Redux 超高水平上,Redux 是开发人员用来简化他们工作工具。...获取和存储数据 React中,我们将UI分解为组件。这些组件都可以分解为更小组件。...它能够为你完成大量繁重工作。。 ? Redux 可以非常轻松地通过网络发送正在发生事情。 接收另一个用户另一台机器上执行操作,重放更改并与本地发生操作合并是很简单。...,而不用等信息从客户端发送到服务器,完成更新确认,再从服务器返回客户端这一个来回完成再做响应。

1.7K30

Redux 快速上手指南

Redux基于简化版本Flux框架,Flux是Facebook开发一个框架。标准MVC框架中,数据可以UI组件存储之间双向流动,而Redux严格限制了数据只能在一个方向上流动。...另外在组件树状阶层结构,父组件(拥有者)与子组件(被拥有者)关系上,子组件是只能由父组件以props(属性)来传递属性值,子组件自己本身无法更改自己props,这也是为什么一开始在学习React时...,都会看到大部份例子只有最上层组件有state,而且都是由它来负责进行当数据改变时重新渲染工作,子组件通常只有负责呈现数据。...下面以生成一个redux-shopping项目并安装Redux为例。 如果没有安装create-react-app工具,请使用下面的命令先执行安装操作。...现在,我们cartReducer什么也没做,但它应该在Redux存储区中管理购物车商品状态。我们需要定义添加、更新和删除商品操作(action)。

1.2K20

一份react面试题总结

也正因为组件React 最小编码单位,所以无论是函数组件还是类组件使用方式和最终呈现效果上都是完全一致。...source参数时,默认每次 render 时都会优先调用上次保存回调中返回函数,重新调用回调; useEffect(() => { // 组件挂载执行事件绑定 console.log...,或则数据有更改时候,我们又需要重新组装一次dom结构,然后更新页面,这样我们手动同步dom和数据成本就越来越高,而且频繁操作dom,也使我们页面的性能慢慢降低。...redux React中页面重新加载时怎样保留数据?...这个问题就设计到了数据持久化, 主要实现方式有以下几种: Redux: 将页面的数据存储redux中,重新加载页面时,获取Redux数据; data.js: 使用webpack构建项目,可以建一个文件

7.4K20

一天梳理完react面试题

,就会触发一次额外渲染,多调用了一次 render 函数,由于它是浏览器刷新屏幕前执行,所以用户对此是没有感知,但是应当避免这样使用,这样会带来一定性能问题,尽量是 constructor...props(用于组件通信)、调用setState(更改state中数据)、调用forceUpdate(强制更新组件)时,都会重新调用render函数render函数重新执行之后,就会重新进行DOM树挂载挂载完成之后就会执行...=id0值也是1因为子元素相同,就不删除并更新,只做移动操作,这就提升了性能为什么 React 要用 JSX?...这样做, React会知道发生的确切变化,并且通过了解发生变化绝对必要情况下进行更新DOM,即可将因操作DOM而占用空间最小化。setState 是同步异步?为什么?实现原理?...但是已经使用redux来管理和存储全局数据基础上,再去使用localStorage来读写数据,这样不仅是工作量巨大,还容易出错。那么有没有结合redux来达到持久数据存储功能框架呢?

5.5K30

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

React 高阶组件、Render props、hooks 有什么区别,为什么要不断迭代 这三者是目前react解决代码复用主要方式: 高阶组件(HOC)是 React 中用于复用组件逻辑一种高级技巧...缺点∶ hoc传递给被包裹组件props容易和被包裹组件重名,进而被覆盖 (2)Render props 官方解释∶ "render prop"是指一种 React 组件之间使用一个值为函数...提供合并多个reducer函数,保证store唯一性 bindActionCreators.js 可以让开发者不直接接触dispacth前提下进行更改state操作 applyMiddleware.js...来担任,store只做存储,中间人,当Reducers更新完成以后会通过store订阅来通知react component,组件把新状态重新获取渲染,组件中也能主动发送action,创建action...一些库如 React 视图视图层禁止异步和直接操作 DOM来解决这个问题。美中不足是,React 依旧把处理 state 中数据问题留给了你。Redux就是为了帮你解决这个问题。

2K00

2022社招React面试题 附答案

React 高阶组件、Render props、hooks 有什么区别,为什么要不断迭代 这三者是目前react解决代码复用主要方式: 高阶组件(HOC)是 React 中用于复用组件逻辑一种高级技巧...缺点∶ hoc传递给被包裹组件props容易和被包裹组件重名,进而被覆盖 (2)Render props 官方解释∶ "render prop"是指一种 React 组件之间使用一个值为函数...提供合并多个reducer函数,保证store唯一性 bindActionCreators.js 可以让开发者不直接接触dispacth前提下进行更改state操作 applyMiddleware.js...来担任,store只做存储,中间人,当Reducers更新完成以后会通过store订阅来通知react component,组件把新状态重新获取渲染,组件中也能主动发送action,创建action...一些库如 React 视图视图层禁止异步和直接操作 DOM来解决这个问题。美中不足是,React 依旧把处理 state 中数据问题留给了你。Redux就是为了帮你解决这个问题。

2K50

「前端架构」使用React进行应用程序状态管理

redux如此成功原因之一是react redux解决了支柱钻井问题。事实上,通过简单地将组件传递到某种神奇connect函数中,就可以不同部分共享数据,这一点非常棒。...将所有应用程序状态都放在一个对象中也会导致其他问题,即使您没有使用Redux。当一个反应获取一个新值,使用该值所有组件都将更新并必须呈现,即使它是只关心部分数据函数组件。...当您遇到与状态相关性能问题时,首先要检查是有多少组件由于状态更改而被重新呈现,并确定这些组件是否真的需要由于状态更改重新呈现。...但是,如果您注意到有许多组件没有DOM更新或需要副作用情况下进行渲染,那么这些组件将不必要地进行渲染。...,而不是一个大存储区中,这样对状态任何部分进行一次更新都不会触发对应用程序中每个组件更新。

2.9K30

优化 React APP 10 种方法

由于Redux实行不变性,这意味着每次操作分派时都会创建新对象引用。这将影响性能,因为即使对象引用发生更改但字段未更改,也会在组件上触发重新渲染。...重新选择库封装了Redux状态并检查该状态字段,并告诉React什么时候渲染或不渲染字段。...因此,重新选择可通过浅遍遍遍prev和当前Redux状态字段来检查宝贵时间,尽管它们具有不同内存引用,但它们是否已更改。...如果字段已更改,它将告诉React重新渲染;如果没有字段已更改,则尽管创建了新状态对象,它也会取消重新渲染。 6. 使用 Web worker JS代码单个线程上运行。...这些组件树使其具有父子关系,即在组件中更新绑定数据时,将重新呈现组件及其子组件,以使更改传播到整个子组件树中。

33.8K20

美团前端react面试题汇总

DOM Diff 算法避免了没有必要DOM操作,从而提高性能React-Router 4怎样路由变化时重新渲染同一个组件?...React实现:通过给函数传入一个组件(函数或类)函数内部对该组件(函数或类)进行功能增强(不修改传入参数前提下),最后返回这个组件(函数或类),即允许向一个现有的组件添加新功能,同时又不去修改该组件...通过使用 React Profiler,可以使用这些方法前后对性能进行测量,从而确保通过进行给定更改来实际改进性能。...但是已经使用redux来管理和存储全局数据基础上,再去使用localStorage来读写数据,这样不仅是工作量巨大,还容易出错。那么有没有结合redux来达到持久数据存储功能框架呢?...,提高编码效率redux缺点: 当数据更新是有时候组件不需要,也要重新绘制,影响效率refs 是什么refs是react中引用简写,有主语存储特定 React 元素或组件引用属性,它将由组件渲染配置函数返回当我们需要输入框内容

5.1K30

【愚公系列】2023年03月 其他-Web前端基础面试题(react专项_35道)

React不使用JSX情况下一样可以工作,然而使用JSX可以提高组件可读性,因此推荐使用JSX 10、为什么不直接更新state状态 如果直接更新state状态,那么它将不会重新渲染组件,而是使用...这些 key 必须是唯一数字或字符串,React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序性能 17、什么是Redux? Redux 是当今最热门前端开发库之一。...这对初始渲染非常有用,并且可以优化应用性能,从而提供更好用户体验。 开发人员工具 - 从操作到状态更改,开发人员可以实时跟踪应用中发生所有事情。...React组件生命周期分为三个不同阶段: 初始呈现阶段:这是组件即将开始其生命旅程并到达DOM阶段。 更新阶段:一旦将组件添加到DOM中,它可能只发生道具或状态更改时才更新和重新呈现。...componentDidUpdate()——呈现发生立即调用。 componentWillUnmount()——在从DOM卸载组件调用 28、什么是React合成事件?

7.6K10
领券