开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

即使存储已成功更新，也无法显示Redux存储中的值

问题描述：即使存储已成功更新，也无法显示Redux存储中的值。

答案：

这个问题可能是由以下几个原因引起的：

状态未正确更新：Redux是一个状态管理库，它使用一个单一的状态树来管理应用程序的状态。当存储成功更新但无法显示值时，可能是因为状态未正确更新。请确保在Redux中正确地更新了相关的状态。
组件未正确连接到Redux存储：在React应用中使用Redux时，需要将组件连接到Redux存储。通过使用React-Redux库中的connect函数，可以将组件连接到Redux存储，并订阅状态的更改。请确保组件正确连接到Redux存储。
未正确使用Redux的选择器（Selectors）：Redux的选择器是用于从存储中选择特定数据的函数。如果未正确使用选择器，可能无法正确获取存储中的值。请确保正确使用Redux的选择器来获取存储中的值。
异步操作未正确处理：如果存储的更新是通过异步操作完成的，可能需要使用Redux中间件（如redux-thunk或redux-saga）来正确处理异步操作。请确保正确处理异步操作以确保存储的更新能够正确显示。
存储中的值被其他操作修改：在多个组件或操作同时修改存储中的值时，可能会导致值无法正确显示。请确保在修改存储中的值时进行适当的同步和互斥操作，以避免冲突。

对于以上问题，可以参考以下腾讯云产品和资源：

Redux官方文档：https://redux.js.org/
React-Redux官方文档：https://react-redux.js.org/
腾讯云云原生服务：https://cloud.tencent.com/product/tke
腾讯云数据库服务：https://cloud.tencent.com/product/cdb
腾讯云服务器运维服务：https://cloud.tencent.com/product/cvm
腾讯云网络安全服务：https://cloud.tencent.com/product/ddos
腾讯云人工智能服务：https://cloud.tencent.com/product/ai
腾讯云物联网服务：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发服务：https://cloud.tencent.com/product/mab
腾讯云存储服务：https://cloud.tencent.com/product/cos
腾讯云区块链服务：https://cloud.tencent.com/product/baas
腾讯云元宇宙服务：https://cloud.tencent.com/product/vr

相关搜索:Angular 11 -我无法显示本地存储中的值 github存储库已更新，但它未显示在CI/CD中的域中 React/Redux -如何在React组件中显示Redux存储中的值？React/Redux -无法将存储值发送到组件的属性中(mapStateToProps)Redux存储不会更新app.js中的所有更改 redux存储中的Formik初始值 sql语句更新数据库中的数据，即使编译器显示执行成功，状态字段也不会更新为什么redux存储状态在render()中显示为‘`false`’，即使默认状态是‘`true`’？即使清除了缓存，传感器数据也会存储以前的值在redux中存储计算值的位置

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

设计师都能懂的 Redux 指南

一种简单的方法是在需要的地方和时间获取和存储数据。这就像每个厨师直接从遥远的农场购买蔬菜和肉类一样。这种方法是很浪费的。即使对于相同的数据，我们也需要从多个组件多次请求服务器。...如果我们没有一个适合所有逻辑的良好结构，很容易让人令人不知所措，代码也很难理解和维护。 Redux 让我们分而治之。它提供了一种将数据更新逻辑分解为小“reducer”的标准方法。...Optimistic UI 的做法不是传统的转圈等待几秒，然后显示结果，而是选择欺骗用户！它事先假定所有请求都是成功的，当用户点赞时直接+1。这种方式有效的原因在于大多数时候请求都是正常的。...当请求失败是，应用只需回滚至前一个 UI 状态即可，并使用服务器响应的实际结果，例如显示错误信息。如同撤消/重做一样，Redux 也支持 Optimistic UI。...持久化和从状态启动 Redux 可以很容易地将应用程序中发生的事情保存到本地存储中。之后，即使电脑重启，应用程序也可以加载所有数据，并从完全相同的位置继续运行，就像从未中断过一样。

1.6K1 0

从设计的角度看 Redux

一种简单的方法是在需要的地方和时间获取和存储数据。这就像每个厨师直接从遥远的农场购买蔬菜和肉类一样。 ? 这种方法是很浪费的。即使对于相同的数据，我们也需要从多个组件多次请求服务器。...如果我们没有一个适合所有逻辑的良好结构，很容易让人令人不知所措，代码也很难理解和维护。 Redux 让我们分而治之。它提供了一种将数据更新逻辑分解为小“reducer”的标准方法。...Optimistic UI 的做法不是传统的转圈等待几秒，然后显示结果，而是选择欺骗用户！它事先假定所有请求都是成功的，当用户点赞时直接+1。 ? 这种方式有效的原因在于大多数时候请求都是正常的。...当请求失败是，应用只需回滚至前一个 UI 状态即可，并使用服务器响应的实际结果，例如显示错误信息。如同撤消/重做一样，Redux 也支持 Optimistic UI。...持久化和从状态启动 Redux 可以很容易地将应用程序中发生的事情保存到本地存储中。之后，即使电脑重启，应用程序也可以加载所有数据，并从完全相同的位置继续运行，就像从未中断过一样。 ?

1.7K3 0

2023再谈前端状态管理

state的组件re-render，即使没有使用该值。...Class 时代 Redux Redux 的灵感来源于 Flux 架构和函数式编程原理，状态更新可预测、可跟踪，提倡使用「单一存储」。这通常会「导致将所有的东西存储在一个大的单体存储中」。...每个 action 都会调用所有 reducer； reducer 要返回新的对象，如果更新的值层级较深，更新成本也很高；更多的内存占用，由于采用单一数据源，所有状态存储在一个 state 中，当某些状态不再需要使用时...Mobx的学习成本更低，没有全家桶。 Mobx在更新state中深层嵌套属性时更方便，直接赋值就好了，redux则需要更新所有途经层级的引用（当然搭配immer也不麻烦）。...，无法存储多个各自拥有消费者的值的集合设计思想 Recoil的状态集是一个有向图 (directed graph)，正交且天然连结于React组件树。

7741 0

前端react面试题总结

解答如果您尝试直接改变组件的状态，React 将无法得知它需要重新渲染组件。通过使用setState()方法，React 可以更新组件的UI。另外，您还可以谈谈如何不保证状态更新是同步的。...存储全局数据时，会有一个问题，如果用户刷新了网页，那么通过redux存储的全局数据就会被全部清空，比如登录信息等。...this.setState() 修改状态的时候会更新组件this.forceUpdate() 强制更新组件件render之后，子组件使用到父组件中状态，导致子组件的props属性发生改变的时候也会触发子组件的更新...虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中，并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。...和getDerivedStateFromProps，目的为了即使不使用这三个生命周期函数，也能实现只有这三个生命周期能实现的功能

2.5K3 0

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

然后计算先前的DOM表示和新的DOM表示之间的差异。一旦完成计算，将仅使用实际已更改的内容来更新实际DOM。 8.为什么浏览器无法阅读JSX？...用Redux开发的应用程序易于测试，并且可以在表现出一致行为的不同环境中运行。 37. Redux遵循的三个原则是什么？单一事实来源：整个应用程序的状态存储在单个存储中的对象/状态树中。...纯函数是那些返回值仅取决于其参数值的函数。 38.您对“唯一的真理源”了解那些？ Redux使用“存储”将应用程序的整个状态存储在一个地方。...因此，所有组件的状态都存储在商店中，它们从商店本身接收更新。单一状态树使跟踪随时间变化以及调试或检查应用程序变得更加容易。 39.列出Redux的组件。...查看–仅显示商店提供的数据。 40.显示数据如何流过Redux？等你来回答。 41.在Redux中如何定义动作？ React中的动作必须具有type属性，该属性指示正在执行的ACTION的类型。

11.1K3 0

React中的Redux

store是一个类似数据库的存储（或者可以叫做状态树），需要设计自己的数据结构来在状态树中存储自己的数据。 Redux入门 Redux简介 Redux是一个状态集中管理库。...Action相当于事件模型中的事件，它描述发生了什么。Reducer相当于事件模型中的监听器，它接收一个旧的状态和一个action，从而处理state的更新逻辑，返回一个新的状态，存储到Store中。...这就意味着应用中所有的数据都遵循相同的生命周期，这样可以让应用变得更加可预测且容易理解。同时也鼓励做数据范式化，这样可以避免使用多个且独立的无法相互引用的重复数据。...,当我们在输入框中输入不同的值时，会显示不同的“hello，___”问候语，由此可以分析出该应用只有一个状态，那就是{ userName: '张三'} 展示组件该应用只有一个展示组件HelloPanel...状态（state）是一种数据结构，存储在store中的数据异步加载的页面的状态：“加载中；加载成功，展示列表；加载失败” 这三种状态。

4K2 0

整理了近期阿里携程的面试题，分享给大家（后期会慢慢完善）

第一个数字可能取5个不同的值： 1xx:信息响应类，表示接收到请求并且继续处理 2xx:处理成功响应类，表示动作被成功接收、理解和接受 3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理 4xx...)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定。...如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。...请描述一次完整的 Redux 数据流一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？...- 堆两种数据类型存储位置不同原始数据类型是直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据；引用数据类型存储在堆(heap)中的对象，占据空间大、大小不固定，如果存储在栈中

1.6K2 1

Immutable.js 到底值不值得用？

不可变数据与Redux库不可变数据是面向功能编程(functional programming)的核心概念，这种概念在JavaScript中的应用已渐占优势。...在后台发生的情况是Redux把行为对象(action)发送到存储对象(store)，然后用reducer()函数产生的新状态(state)更新存储对象(store)。...组件用connect()函数修饰以后，每次都会检查数据是否更新。数据有更新，组件才会通过React生命周期触发重渲染。这使Redux库能选择性地渲染React框架组件，提升性能。...[缺点] 不怎么符合ES6版本的格式如果程序状态(app state)存储在Immutable库数据类型中的话，那我们的组件也应该运用同样的数据类型，就这样决定了。...如果核心数据类型处理出了问题，即使都是些小问题，也会让人感到沮丧，又会浪费更多宝贵的开发时间。结果为了使用Immutable库，我们重组了一些组件的代码。

1.9K5 0

React和Redux——状态管理Flux和Redux

这样，即使父组件不需要该prop也被迫成为一个搬运工的角色这样与我们创建高可用性的组件原则相违背。...因此，Facebook在发布React的时候也同时推出了Flux框架；Flux的核心思想是“单向数据流”，在理解Flux的基础上我们可以更容易地理解Redux。...但无法避免的多个Store之间可能会存在或多或少的依赖关系，某一个Store的状态数据需要根据另一个Store先更新后再计算得到。...总结使用Redux对应用中的状态进行管理，首先使用Redux中Store提供的subscribe和unsubscribe方法在组件的生命周期内监听Store的更新并及时将Store中的最新状态通过this.setState...Store由Redux来维护，Redux负责存储数据最新的状态并将当前状态和动作传递给Reducer进行状态计算，计算后返回更新后的状态又交由Store来存储。

1.8K8 0

社招前端常见react面试题（必备）_2023-02-26

在 commit 阶段中，React 会根据前面为各个节点打的 Tag，一次性更新整个 dom 元素 react-redux 的实现原理？...这就是 React自己实现的冒泡机制 React实现的移动应用中，如果出现卡顿，有哪些可以考虑的优化方案增加shouldComponentUpdate钩子对新旧props进行比较，如果值相同则阻止更新...函数时均会创建一个新的函数，即使内容没有发生任何变化，也会导致节点没必要的重渲染，建议将函数保存在组件的成员对象中，这样只会创建一次组件的props如果需要经过一系列运算后才能拿到最终结果，则可以考虑使用...存储全局数据时，会有一个问题，如果用户刷新了网页，那么通过redux存储的全局数据就会被全部清空，比如登录信息等。...但是在已经使用redux来管理和存储全局数据的基础上，再去使用localStorage来读写数据，这样不仅是工作量巨大，还容易出错。那么有没有结合redux来达到持久数据存储功能的框架呢？

1.5K1 0

React面试八股文（第一期）

存储全局数据时，会有一个问题，如果用户刷新了网页，那么通过redux存储的全局数据就会被全部清空，比如登录信息等。...但是在已经使用redux来管理和存储全局数据的基础上，再去使用localStorage来读写数据，这样不仅是工作量巨大，还容易出错。那么有没有结合redux来达到持久数据存储功能的框架呢？...你可以在 componentDidMount 里面直接调用 setState，它将触发额外渲染，但此渲染会发生在浏览器更新屏幕之前，如此保证了即使 render 了两次，用户也不会看到中间状态。...使用了 Redux，所有的组件都可以从 store 中获取到所需的 state，他们也能从store 获取到 state 的改变。这比组件之间互相传递数据清晰明朗的多。...受控组件更新state的流程：可以通过初始state中设置表单的默认值每当表单的值发生变化时，调用onChange事件处理器事件处理器通过事件对象e拿到改变后的状态，并更新组件的state一旦通过setState

3K3 0

arcengine+c# 修改存储在文件地理数据库中的ITable类型的表格中的某一列数据，逐行修改。更新属性表、修改属性表某列的值。

作为一只菜鸟，研究了一个上午+一个下午，才把属性表的更新修改搞了出来，记录一下：我的需求是：已经在文件地理数据库中存放了一个ITable类型的表（不是要素类FeatureClass），注意不是要素类...FeatureClass的属性表，而是单独的一个ITable类型的表格，现在要读取其中的某一列，并统一修改这一列的值。...表在ArcCatalog中打开目录如下图所示： ? ?...网上有的代码是用的ID来索引，但是表格的ID可能并不是从0开始，也不一定是按照顺序依次增加。...string strValue = row.get_Value(fieldindex).ToString();//获取每一行当前要修改的属性值 string newValue

9.5K3 0

前端高频react面试题

来担任，store只做存储，中间人，当Reducers的更新完成以后会通过store的订阅来通知react component，组件把新的状态重新获取渲染，组件中也能主动发送action，创建action...=id0的值也是1因为子元素相同，就不删除并更新，只做移动操作，这就提升了性能Redux 状态管理器和变量挂载到 window 中有什么区别两者都是存储数据以供后期使用。...同步：在 React 无法控制的地方，比如原生事件，具体就是在 addEventListener 、setTimeout、setInterval 等事件中，就只能同步更新。...中，每次进入页面判断sessionStorage中有没有存储的那个值，有，则读取渲染数据；没有，则说明数据是初始化的状态。...一般可以用哪些值作为key最好使用每一条数据中的唯一标识作为key，比如：手机号，id值，身份证号，学号等也可以用数据的索引值（可能会出现一些问题）

3.3K2 0

校招前端经典react面试题（附答案）

render函数中减少类似onClick={() => {doSomething()}}的写法，每次调用render函数时均会创建一个新的函数，即使内容没有发生任何变化，也会导致节点没必要的重渲染，建议将函数保存在组件的成员对象中...实现，也是处于事务流中；问题: 无法在setState后马上从this.state上获取更新后的值。...，与事务流无关，自然是同步；而setTimeout是放置于定时器线程中延后执行，此时事务流已结束，因此也是同步；批量更新 : 在合成事件和生命周期钩子中，setState更新队列时，存储的是合并状态...如下所示， username没有存储在DOM元素内，而是存储在组件的状态中。每次要更新 username时，就要调用 setState更新状态；每次要获取 username的值，就要获取组件状态值。...如下所示，表单的值并没有存储在组件的状态中，而是存储在表单元素中，当要修改表单数据时，直接输入表单即可。有时也可以获取元素，再手动修改它的值。

2.1K2 0

前端经典react面试题及答案_2023-02-28

是基于事务流完成的事件委托机制实现，也是处于事务流中；问题: 无法在setState后马上从this.state上获取更新后的值。...setState(updater, callback)，在回调中即可获取最新值；在原生事件和 setTimeout 中，setState是同步的，可以马上获取更新后的值；原因: 原生事件是浏览器本身的实现...，与事务流无关，自然是同步；而setTimeout是放置于定时器线程中延后执行，此时事务流已结束，因此也是同步；批量更新 : 在合成事件和生命周期钩子中，setState更新队列时，存储的是...)行为(action)给store,而不是直接通知其他组件，组件内部通过订阅store中的状态state来刷新自己的视图图片 Redux三大原则唯一数据源整个应用的state都被存储到一个状态树里面...redux 有什么缺点一个组件所需要的数据，必须由父组件传过来，而不能像 flux 中直接从 store 取当一个组件相关数据更新时，即使父组件不需要用到这个组件，父组件还是会重新 render，可能会有效率影响

1.5K4 0

React-全局状态管理的群魔乱舞

「然而」，因为它是内存中的一个「单一值」，你不能为「不同的子树」提供不同的数据状态。 ❞ 写入存储状态的能力一个库应该提供一个直观的API来读取和写入存储的数据。...在一些「后-redux」的全局状态管理解决方案中还有其他一些库，如Valtio[6]，也允许开发者使用可变风格的API。...对于状态管理库来说，如果在渲染过程中读取的值发生了变化，那么两个组件就有可能从外部存储中读取不同的值。这就是所谓的「数据撕裂」。...随着应用程序的发展，Redux 倾向于「吸纳所有的状态」，不管它是什么类型，因为它提倡单一的存储。这通常会「导致将所有的东西存储在一个大的单体存储中」。...并通过仅使图中已更新的原子失效来优化渲染。这与拥有一个大的单体状态球形成鲜明对比，你可以「订阅并试图避免不必要的渲染」。

3.7K2 0

2022前端笔试题总结

，会使一些编写不标准的网页无法正确显示。...浏览器本地存储方式及使用场景（1）CookieCookie是最早被提出来的本地存储方式，在此之前，服务端是无法判断网络中的两个请求是否是同一用户发起的，为解决这个问题，Cookie就出现了。...的使用场景：有些网站有换肤的功能，这时候就可以将换肤的信息存储在本地的LocalStorage中，当需要换肤的时候，直接操作LocalStorage即可在网站中的用户浏览信息也会存储在LocalStorage...中，还有网站的一些不常变动的个人信息等也可以存储在本地的LocalStorage中（3）SessionStorageSessionStorage和LocalStorage都是在HTML5才提出来的存储方案...Store 存储了视图层所有的数据，当 Store 变化后会引起 View 层的更新。如果在视图层触发一个 Action，就会使当前的页面数据值发生变化。

2K4 0

2023前端二面react面试题（边面边更）

即使使用了 JSX，也会在构建过程中，通过 Babel 插件编译为 React.createElement。所以 JSX 更像是 React.createElement 的一种语法糖。...存储全局数据时，会有一个问题，如果用户刷新了网页，那么通过redux存储的全局数据就会被全部清空，比如登录信息等。...但是在已经使用redux来管理和存储全局数据的基础上，再去使用localStorage来读写数据，这样不仅是工作量巨大，还容易出错。那么有没有结合redux来达到持久数据存储功能的框架呢？...，那么使用者可以对数组中的元素命名，代码看起来也比较干净如果 useState 返回的是对象，在解构对象的时候必须要和 useState 内部实现返回的对象同名，想要使用多次的话，必须得设置别名才能使用返回值下面来看看如果...当 ref 属性被用于一个自定义的类组件时，ref 对象将接收该组件已挂载的实例作为他的 current。当在父组件中需要访问子组件中的 ref 时可使用传递 Refs 或回调 Refs。

2.4K5 0

React进阶(1)-理解Redux

,路由跳转等业务逻辑即使不用Redux,照样能做小应用,只是略复杂繁琐一些而已,下面会介绍他们之间的对比那么对于技术选型,什么时候用Redux什么时候不用?...在Redux中,要求把组件的数据放到公共的存储仓库(区域)当中,让组件尽可能的减少状态数据存储,换而言之,所有组件自身内部状态数据都不放在state里面了,把它放到Store这样的一个存储仓库当中去...一旦Store公共存储的状态数据发生改变了的,由于其他组件是公用Store的数据,那么其他组件就会感知到Store的数据发生了改变,从而自身组件也会跟着改变只要Store公共存储区域的数据发生改变...(仓库)中进行存储,当改变Store存储区域里面的数据时,其他组件如果用到了公共区域的数据,那么就会感知到数据的变化,它会自动的更新取Store中最新的数据这样话,无论你的应用组件嵌套得有多么复杂,...,React是用作于视图层的渲染,也相当于MVC中的V层,而Redux它是用于管理组件公共数据的Model层,更近一步讲,它是Reducer与Flux的一种结合,改进.

1.4K2 2

一天梳理React面试高频知识点

key可以帮助 React跟踪循环创建列表中的虚拟DOM元素，了解哪些元素已更改、添加或删除。每个绑定key的虚拟DOM元素，在兄弟元素之间都是独一无二的。...即使使用了 JSX，也会在构建过程中，通过 Babel 插件编译为 React.createElement。所以 JSX 更像是 React.createElement 的一种语法糖。...因此在这些阶段发岀Ajax请求显然不是最好的选择。在组件尚未挂载之前，Ajax请求将无法执行完毕，如果此时发出请求，将意味着在组件挂载之前更新状态（如执行 setState），这通常是不起作用的。...state里面的数据问题Redux设计理念Redux是将整个应用状态存储到一个地方上称为store,里面保存着一个状态树store tree,组件可以派发(dispatch)行为(action)给store...,而不是直接通知其他组件，组件内部通过订阅store中的状态state来刷新自己的视图图片Redux三大原则唯一数据源整个应用的state都被存储到一个状态树里面，并且这个状态树，只存在于唯一的store

2.8K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭