开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

React-Redux状态不会更新onClick

React-Redux是一个用于构建可扩展、可维护的前端应用程序的JavaScript库。它结合了React和Redux两个流行的库，提供了一种管理应用程序状态的方式。

在React-Redux中，状态更新是通过Redux的store来管理的。当组件中的状态发生变化时，Redux会自动更新store中的状态，并通知相关的组件进行重新渲染。然而，如果在onClick事件处理函数中状态没有更新，可能有以下几个原因：

组件没有正确连接到Redux的store：在使用React-Redux时，需要使用connect函数将组件连接到Redux的store。确保组件正确地连接到了store，以便能够正确地更新状态。
没有正确地分发action：在Redux中，状态的更新是通过分发action来触发的。在onClick事件处理函数中，需要分发一个action来更新状态。确保正确地分发了action，并且在reducer中处理了该action，以便更新状态。
没有正确地映射状态到组件的props：在使用React-Redux时，需要使用mapStateToProps函数将store中的状态映射到组件的props上。在onClick事件处理函数中，确保正确地映射了需要更新的状态到组件的props上。

总结起来，要解决React-Redux状态不会更新的问题，需要确保组件正确连接到Redux的store，正确地分发action来更新状态，并正确地映射状态到组件的props上。

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

腾讯云官网：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
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iot
移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
区块链（BCS）：https://cloud.tencent.com/product/bcs
元宇宙（Tencent Real-Time Rendering Engine）：https://cloud.tencent.com/product/tencent-rtr 请注意，以上链接仅供参考，具体产品选择应根据实际需求进行评估和决策。

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

有帮助

没帮助

相关·内容

Mutation状态更新

Mutation状态更新 Vuex的store状态的更新唯一方式：提交Mutation Mutation主要包括两部分：字符串的事件类型（type）一个回调函数（handler）,该回调函数的第一个参数就是...mutation的定义方式： image.png 通过mutation更新 image.png Mutation传递参数在通过mutation更新数据的时候, 有可能我们希望携带一些额外的参数参数被称为是...的对象作为payload使用, 所以代码没有改变, 依然如下: image.png Mutation响应规则 Vuex的store中的state是响应式的, 当state中的数据发生改变时, Vue组件会自动更新...当给state中的对象添加新属性时, 使用下面的方式: 方式一: 使用Vue.set(obj, ‘newProp’, 123) 方式二: 用心对象给旧对象重新赋值我们来看一个例子: 当我们点击更新信息时

5942 0

React 进阶 - React Redux

Vue 中 React-Redux React-Redux 是连接 React 应用和 Redux 状态管理的桥梁 React-redux 主要做两件事如何向 React 应用中注入 redux...正常情况不可能将每一个需要状态的组件都用 subscribe / unSubscribe 来进行订阅比如 A 组件需要状态 a，B 组件需要状态 b ，那么改变 a，只希望 A 组件更新，不希望 B...组件更新，显然上述是不能满足的所以为了解决上述诸多问题，React-Redux 就应运而生了。...Store 中 state 的改变，促使消费对应的 state 的组件更新 # Provider 由于 Redux 数据层，可能被很多组件消费，所以 React-Redux 中提供了一个 Provider...addNestedSub 建立起关联当 store 中 state 发生改变，会触发 store.subscribe ，但是只会通知给 Provider 中的根 Subscription，根 Subscription 也不会直接派发更新

9071 0

使用Redux制作一个TodoList

# 引言在组件化开发的 web 前端当中，经常的需要在不同的组件之间进行通信以及一些数据共享，那么我们就需要使用像 Vuex 那样的状态管理工具，在 React 当中，经常使用 Redux 来做状态管理工具...this.handleChange} value={this.state.value} /> <Button type="primary" onClick...(AppUI); connect方法可以省略mapStateToProps参数，那样的话，UI 组件就不会订阅Store，就是说 Store 的更新不会引起 UI 组件的更新。...mapStateToProps：更新 props————>作为输入源。...触发action更新reducer，进而更新state，从而驱动参数1变化，引起UI数据的变化

4421 0

React 如何使用Redux的说明

它会将UI的状态保存在内存中，并在需要时更新实际DOM。组件化：React使用组件化的思想来构建UI。每个组件都是一个独立的、可重用的UI元素。...Redux使用单一状态树来管理应用程序的状态，并使用纯函数来更新状态。 Redux的主要特点包括：单一状态树：Redux使用单一状态树来管理应用程序的状态。...所有的状态都保存在一个对象中，并且可以通过getState方法来获取。纯函数：Redux使用纯函数来更新状态。纯函数不会修改传入的参数，而是返回一个新的状态对象。...派发操作：Redux使用派发操作来更新状态。派发操作是一个简单的对象，它包含一个类型属性和一些可选的数据。...使用React可以构建UI组件，而使用Redux可以管理应用程序的状态。两者结合使用时，可以使用React-Redux库将组件和状态连接起来，并通过props传递状态和操作。

971 0

react-redux入门教程

容器组件容器组件的特征负责管理数据和业务逻辑，不负责 UI 的呈现带有内部状态使用 Redux 的 API React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux...也就是说，用户负责视觉层，状态管理则是全部交给它 connect() React-Redux提供connect方法，用于从UI组件生成容器组件。connect的意思就是将这两种组件连起来。...mapStateToProps的第一个参数总是State对象，还可以使用第二个参数，代表容器组件的props对象 connect方法可以省略mapStateToProps参数，那样的话，UI 组件就不会订阅...Store，就是说 Store 的更新不会引起 UI 组件的更新。...const mapDispatchToProps = { onClick: (filter) => { type: 'SET_VISIBILITY_FILTER', filter:

1.2K3 0

Redux 入门到高级教程

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。 (如果你需要一个 WordPress 框架，请查看 Redux Framework。)...所有的状态，保存在一个对象里面。只能按照Redux提供的约定的方式对状态进行编辑。 Store Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。...redux提供了combineReducers方法协助我们把状态对应的Reducer进行拆分。单独状态对应的Reducer进行单独编写。...React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。也就是说，用户负责视觉层，状态管理则是全部交给它。...connect方法可以省略mapStateToProps参数，那样的话，UI 组件就不会订阅Store，就是说 Store 的更新不会引起 UI 组件的更新。

2.6K3 0

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

这个库的作用是将Redux的状态机和React的UI呈现绑定在一起，当你dispatch action改变state的时候，会自动更新页面。...其实我们用Redux的目的不就是希望用它将整个应用的状态都保存下来，每次操作只用dispatch action去更新状态，然后UI就自动更新了吗？...每个子组件需要读取状态的时候，直接用store.getState()就行了，更新状态的时候就store.dispatch，这样其实也能达到目的。...用上面的Provider和connect替换官方的react-redux其实已经可以渲染出页面了，但是点击按钮还不会有反应，因为我们虽然通过dispatch改变了store中的state，但是这种改变并没有触发我们组件的更新...: { value: 1 } } 你去改了stateA.value是不会触发重新渲染的，React-Redux这样设计我想是出于性能考虑，如果是深比较，比如递归去比较，比较浪费性能，而且如果有循环引用还可能造成死循环

3.7K2 1

Redux 入门教程（三）：React-Redux 的用法

const Title = value => {value}; 因为不含有状态，UI 组件又称为"纯组件"，即它纯函数一样，纯粹由参数决定它的值。...负责管理数据和业务逻辑，不负责 UI 的呈现带有内部状态使用 Redux 的 API 总之，只要记住一句话就可以了：UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。...React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。也就是说，用户负责视觉层，状态管理则是全部交给它。...connect方法可以省略mapStateToProps参数，那样的话，UI 组件就不会订阅Store，就是说 Store 的更新不会引起 UI 组件的更新。...const mapDispatchToProps = { onClick: (filter) => { type: 'SET_VISIBILITY_FILTER', filter:

1.6K5 0

react-hooks如何使用？

react-hooks是react16.8以后，react新增的钩子API，目的是增加代码的可复用性，逻辑性，弥补无状态组件没有生命周期，没有数据管理状态state的缺陷。...这里值得一提的是，如果把负责请求是数据 ➡️ 视图更新的渲染组件，用react-hooks编写的话，配合immutable等优秀的开源库，会有更棒的效果(这里特别注意的是⚠️，如果乱用hooks，不但不会提升性能...3.如何使用hooks 接下来和大家探讨一下，react-hooks主要api,具体使用 1 useState 数据存储，派发更新 useState出现，使得react无状态组件能够像有状态组件一样，可以拥有自己...redux useReducer 是react-hooks提供的能够在无状态组件中运行的类似redux的功能api，至于它到底能不能代替redux react-redux ,我个人的看法是不能的，redux...我们知道无状态组件的更新是从头到尾的更新，如果你想要从新渲染一部分视图，而不是整个组件，那么用useMemo是最佳方案，避免了不需要的更新，和不必要的上下文的执行，在介绍useMemo之前，我们先来说一说

3.5K8 0

在React项目中全量使用 Hooks

={() => setCount(count + 1)}>click )}此方法会返回两个值：当期状态和更新状态的函数。...效果同 this.state 与this.setState，区别是 useState 传入的值并不一定要对象，并且在更新的时候不会把当前的 state 与旧的 state 合并。...，payload 则是更新的数据。...写过 react-redux 的同学可能发这个 reducer 与 react-redux 中的 reducer 很像，我们借助 react-redux 的思想可以实现一个对象部分更改的 reducer...区别就是这，那么应用场景肯定是从区别中得到的，useLayoutEffect在渲染前执行，也就是说我们如果有状态变了需要依据该状态来操作DOM，为了避免状态变化导致组件渲染，然后更新 DOM 后又渲染，

3K5 1

【小狮子前端】「Redux」概念理解+实战上手（内含大量实例）

官网对它的定义：Redux 是 JavaScript 状态容器，提供可预测化的状态管理。...四、react-redux 可以看到上面我们并没有使用到react-redux，虽然能实现功能，但细心会发现我是直接拿的store，组件多的话个个拿store，这样不好。...、数据共享、事务状态、数据状态I/O和副作用隔离、状态回溯以及一系列辅助工具带来的强大调试能力等等，使得用redux来管理数据流成为更好的选择。...那可能会存在一些担忧，会不会新的没有之前用的mapStateToProps好用呢？...那来看看他的一些好处吧：当然是配合hooks写代码更简洁性能上延续redux以前的性能优化逻辑，比较props，如果当前的props跟老的props相同，则组件将不会重新渲染。

1.3K0 0

Redux with Hooks

onSubmit={handleSubmit} /> ) } ... useCallback会返回被它包裹的函数的memorized版本，只要依赖项不变，memorized的函数就不会更新...因为很显然，它们俩都消费了同一个state（尽管都只消费了state的一部分），所以当这个全局的state被更新后，所有的Consumer自然也会被更新。但我们不是已经用memo包裹组件了吗？...是的，memo能为我们守住来自props的更新，然而state是在组件内部通过useContext这个hook注入的，这么一来就会绕过最外层的memo。那么有办法可以避免这种强制更新吗？...，或者纯粹想造轮子练练手，否则个人是不建议放弃Redux等成熟的状态管理方案的，因为性价比不高。...此外，使用Hooks自建全局状态管理的方式在小项目中固然可行，然而想用在较大型的、正式的业务中，至少还要花费心思解决性能问题，而这个问题正是React-Redux等工具已经花费不少功夫帮我们解决了的，似乎并没有什么充分的理由要抛弃它们

3.3K6 0

深入浅出redux知识

; } } 我们都知道组件中的 state 和 props 改变都会导致视图更新，每当容器里面的状态改变需要修改 state，此时就需要用到 store 中的 subscribe 订阅这个修改状态的方法...; } } export default Counter; react-redux npm install react-redux 这个库是连接库，用来和react和redux进行关联的，上面使用...redux的时候发现一个痛点就是要订阅设置状态的方法还要取消订阅，而react-redux却可以通过props自动完成这个功能。...，只有在调用dispatch方法修改状态的时候才会执行reducer 才能得到新状态。...} } ensureCanMutateNextListeners 的作用是，如果是在 listeners 被调用期间发生订阅(subscribe)或者解除订阅(unsubscribe),在本次通知中并不会立即生效

9776 0

React技巧之状态更新

bobbyhadz.com/blog/react-update-state-when-props-change[1] 作者：Borislav Hadzhiev[2] 正文从这开始~ 总览在React中，当props变动时更新状态...每当props更新时，useEffect中的逻辑代码就会重新运行。...Parent() { const [parentCount, setParentCount] = useState(0); return ( ); } update-state-on-props-change.gif 使用useEffect钩子当props改变时，我们使用useEffect钩子来更新组件中的状态...每当parentCount属性值变化时，useEffect钩子会重新运行，并且我们使用setChildCount函数来更新子组件的状态。

8702 0

使用Redux和React-redux在React中进行状态管理

npm i redux react-redux redux：Redux用于管理状态 react-redux：用于在react和redux库之间进行绑定。...Reducer Reducer函数是一个纯函数，它采用上一个应用程序状态，type of action并返回下一个状态而不会改变前一个状态。...Redux遵循不变性，这意味着我们不改变应用程序状态，而不是返回新的应用程序状态。 Redux在单个JavaScript对象中管理整个应用程序状态。...通过使用状态参数，我们可以访问在reducer函数内部定义的redux状态。...改变Redux状态 redux状态树是只读的，我们不能直接改变状态。在redux中，我们只能通过调用dispatch类型为的方法来改变状态action。

2.9K3 0

React redux

React Redux是Redux在React应用程序中的绑定库，它提供了一些特殊的组件和API，以便在React组件中访问和更新Redux存储的状态。...您可以使用以下命令使用npm或yarn进行安装：npm install redux react-redux或yarn add redux react-redux安装完成后，您可以开始在React应用程序中使用...这样，所有的子组件都可以通过使用特殊的useSelector和useDispatch钩子来访问和更新存储中的状态。...={increment}>Increment Decrement );};export...在按钮的点击事件中，我们分别调用dispatch方法发送INCREMENT和DECREMENT动作来更新状态。

1.2K2 0

React-Redux 对Todolist修改

在单独使用redux的时候需要手动订阅store里面感觉特别麻烦不错的是react有一个组件可以帮我们解决这个问题, 那就是react-redux。...react-redux提供了Provider 和 connent给我们使用。...先说一下几个重点知道的知识 Provider 就是用来提供store里面的状态自动getState() connent 用来连接store里面的状态为什么要使用connect连接Store 手动...例如: ui组件不需要作用是描述ui的骨架、容器组件描述如何运行（数据获取、状态更新）可以使用话不多说,直接实战首先安装 yarn add react-redux 我们前面说了子组件想要使用...但是子组件还是没有状态,正常的话需要手动订阅store里面的改变当使用了react-redux之后直接使用connent连接store做映射就可以直接注入到props里面 todolist.js

6123 0

Redux入门实战——todo-list2.0实现

redux不会直接修改state，而是在状态发生更改时，返回一个全新的状态，旧的状态并没有进行更改，得以保留。可以使用 redux-devtools-extension 工具进行可视化查看。...store提供方法来操作state 维持应用的 state；提供 getState() 方法获取 state；提供 dispatch(action) 方法更新 state；通过 subscribe...一个reducer就是一个函数，这个函数接受两个参数当前state 和 action，然后根据 action 来对当前 state 进行操作，如果有需要更改的地方，就返回一个新的 state ,而不会对旧的...3.3.2 展示组件和容器组件比较展示组件容器组件作用描述如何展示骨架、样式描述如何运行(数据获取、状态更新...安装 react-redux 包 npm install --save react-redux 编写入口文件 index.js 前文讲到，redux使用一个唯一的 store 来对项目进行状态管理，

1.3K1 0

Redux入门实战——todo-list2.0实现

redux不会直接修改state，而是在状态发生更改时，返回一个全新的状态，旧的状态并没有进行更改，得以保留。可以使用 redux-devtools-extension 工具进行可视化查看。...store提供方法来操作state 维持应用的 state；提供 getState() 方法获取 state；提供 dispatch(action) 方法更新 state；通过 subscribe...一个reducer就是一个函数，这个函数接受两个参数当前state 和 action，然后根据 action 来对当前 state 进行操作，如果有需要更改的地方，就返回一个新的 state ,而不会对旧的...原文链接：展示组件和容器组件相分离译文链接：展示组件和容器组件相分离 3.3.2 展示组件和容器组件比较展示组件容器组件作用描述如何展示骨架、样式描述如何运行(数据获取、状态更新)...安装 react-redux 包 npm install --save react-redux 编写入口文件 index.js 前文讲到，redux使用一个唯一的 store 来对项目进行状态管理，那么首先我们需要创建这个

1.2K3 0

06-React状态管理 Redux(工作流程, 核心概念, 求和案例, 异步Action, React-Redux, 多状态管理, 纯函数, 高阶函数, Redux开发者工具)

Redux 简介其实就是一个集中的状态管理技术, 类似于VueX, 以及后端的分布式配置中心, 在前端的文章里提后端,是不是不太好~, 但是能学习这个技术的人, 从简短的一句话中应该就已经简单的了解了这个技术...data 数据属性任意否否 { "type":"add", "data:":{ "name":"flower", "age":18 } } Reducer 用于初始化状态...root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); // 订阅store状态更新...Learn more: https://bit.ly/CRA-vitals reportWebVitals(); 可以将原来添加的监听删除了, 因为react-redux会自动监听redux的状态变化,...return preState } 效果实现了多组件Store存储,并交互数据纯函数一些特别的函数,只要是同样的输入(实参),必定得到同样的输出(返回) 必须遵守以下的约束不得改写参数数据不会产生任何副作用

1.9K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭