开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当我点击一个按钮时，为什么我不能从reducer获得数据？

当你点击一个按钮时，无法从reducer获得数据的原因可能有以下几种可能性：

没有正确配置Redux的store：Redux是一种用于管理应用程序状态的JavaScript库。在使用Redux时，需要正确配置store，并将reducer与store进行关联。如果没有正确配置store，那么在点击按钮时无法从reducer获得数据。

解决方法：确保正确配置Redux的store，并将reducer与store进行关联。

没有正确定义reducer：reducer是一个纯函数，用于根据action的类型来更新应用程序的状态。如果没有正确定义reducer，那么在点击按钮时无法从reducer获得数据。

解决方法：确保正确定义reducer，并确保reducer能够正确处理action的类型。

没有正确触发action：在Redux中，通过触发action来通知reducer更新状态。如果没有正确触发action，那么在点击按钮时无法从reducer获得数据。

解决方法：确保正确触发action，并确保action能够正确传递数据给reducer。

没有正确订阅state的变化：在Redux中，可以通过订阅state的变化来获取最新的状态。如果没有正确订阅state的变化，那么在点击按钮时无法从reducer获得数据。

解决方法：确保正确订阅state的变化，并在回调函数中获取最新的状态。

总结起来，无法从reducer获得数据可能是由于Redux的配置问题、reducer定义问题、action触发问题或者state订阅问题导致的。需要仔细检查这些方面，并确保它们正确地配合工作，才能从reducer获得数据。

腾讯云相关产品推荐：

云开发（CloudBase）：提供一站式后端云服务，包括云函数、云数据库、云存储等，可用于快速开发和部署应用程序。详情请参考：腾讯云开发产品介绍
云服务器（CVM）：提供可扩展的云服务器实例，可用于部署应用程序和托管网站。详情请参考：腾讯云服务器产品介绍
云数据库 MySQL 版（TencentDB for MySQL）：提供高性能、可扩展的云数据库服务，适用于各种规模的应用程序。详情请参考：腾讯云数据库 MySQL 版产品介绍
人工智能开发平台（AI Lab）：提供丰富的人工智能开发工具和服务，包括图像识别、语音识别、自然语言处理等。详情请参考：腾讯云人工智能开发平台产品介绍
物联网开发平台（IoT Explorer）：提供全面的物联网解决方案，包括设备接入、数据管理、消息通信等功能。详情请参考：腾讯云物联网开发平台产品介绍

相关搜索:为什么当我点击按钮时我的数据文件不能改变？为什么当我点击ADD按钮时，数据模式没有弹出？为什么当我点击“后退”按钮时，我的活动会重置？当点击按钮时，为什么modal不能从表格数据中显示？当我点击弹出按钮时，它打开了谷歌提供商，我点击了关闭按钮，立即我点击登录按钮弹出不工作当我点击一个按钮时，我的页面会重新加载为什么当我点击按钮时，我的数据没有进入MySQL数据库，也没有提交？当我不提供数据时，为什么我的BLoC不工作？当我动态更改数据时，为什么我的MVVM不工作？为什么当我点击递增按钮时，我的步进器没有给出正确的值？我有多个onClick按钮，每当我点击一个按钮时，所有相同的按钮都会触发。Reactjs 为什么当用户点击按钮时不能显示我想要的数据当我在React中点击一个按钮时，我需要创建一个卡片组件为什么在导入store for feature之后，当我调度一个操作时，我的reducer会被多次调用？当我点击iOS中的一个按钮时，如何调整我的Firebase SnapshotListener限制？当我点击第二个按钮时，我想改变第一个按钮的颜色为什么当我的按钮在移动chrome上被点击时，我的按钮的父级会被高亮显示？当一个按钮被点击时，我如何从数组中获得一个随机元素？当我在navigationOptions中点击一个按钮时，为什么React本机状态没有正确设置？一个问题，当我点击编辑按钮时，所有其他元素都会监听点击，但我只需要我点击的那个元素

相关搜索:

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

有帮助

没帮助

相关·内容

Redux的设计模式

而且这样处理数据的开销是非常巨大的。一个不小心很有可能陷入无限死循环中。所以当我们的网站复杂到一定程度的时候我们就需要设计模式了，可能之前你已经知道MVC, MVVM, MV*。...Reducer是帮助Store处理数据的方法，他是一个方法是一个过程是一个函数不是一个具体存在的对象，Reducer可以帮助Store初始化数据，修改数据，删除数据，你可能会好奇我们为什么要使用Reducer...函数中可以通过store.getState()获得新的state值，完成页面更新。...假设我们页面中有一个button按钮和一个div元素，这个元素用来展示一个数字，初始值为0，当我们点击button按钮的时候让div中显示的数字增加。...接着订阅state，当state变更时获取页面div元素更新div的内容为state的值。最后点击按钮的时候我们通过dispatch来分发action。

1.5K2 0

React 入门学习（十六）-- 数据共享

/li> }) } 我们可以看到这里采用了 ref 来获取到当前事件触发的节点，并通过 this.addPerson 的方式给按钮绑定了一个点击事件...当前组件需要使用的数据都需要在 connect 中暴露 2. 编写 reducer 首先，我们需要明确 reducer 的作用，它是用来干什么的？...根据操作类型来指定状态的更新也就是说当我们点击了添加按钮后，会将输入框中的数据整合成一个对象，作为当前 action 对象的 data 传递给 reducer 我们可以看看我们编写的 action 文件...这个是高阶函数部分的知识了，纯函数是一个不改变参数的函数，也就是说，传入的参数是不能被改变的。 为什么要提这个呢？...在我们 return 时，有时候会想通过数组的 API 来在数组前面塞一个值，不也可以吗？

3312 0

React 入门学习（十六）-- 数据共享

/li> }) } 我们可以看到这里采用了 ref 来获取到当前事件触发的节点，并通过 this.addPerson 的方式给按钮绑定了一个点击事件...当前组件需要使用的数据都需要在 connect 中暴露 2. 编写 reducer 首先，我们需要明确 reducer 的作用，它是用来干什么的？...根据操作类型来指定状态的更新也就是说当我们点击了添加按钮后，会将输入框中的数据整合成一个对象，作为当前 action 对象的 data 传递给 reducer 我们可以看看我们编写的 action 文件...这个是高阶函数部分的知识了，纯函数是一个不改变参数的函数，也就是说，传入的参数是不能被改变的。 为什么要提这个呢？...在我们 return 时，有时候会想通过数组的 API 来在数组前面塞一个值，不也可以吗？

4321 0

React Hooks踩坑分享

我们按照下面的步骤去操作：点击num到3 点击展示现在的值按钮在定时器回调触发之前，点击增加num到5。可以猜一下alert会弹出什么？ ---- 分割线 ---- 其最后弹出的数据是3。...每一次渲染都能拿到独立的num状态，这个状态值是函数中的一个常量。所以在num为3时，我们点击了展示现在的值按钮，就相当于: function Demo() { // ......这一次弹出的数据是5。 为什么同样的例子在类组件会有这样的表现呢？...所以如果在用户再点击了展示现在的值按钮的情况下我们对点击按钮又点击了几次，this.state将会改变。handleClick方法从一个“过于新”的state中得到了num。...当我们函数本身只在需要的时候才改变。在上面的例子中，我们无论点击多少次点击按钮，num的值始终为1。这是因为useCallback中的函数被缓存了，其依赖数组为空数组，传入其中的函数会被一直缓存。

2.9K3 0

TCA - SwiftUI 的救星？(一)

从 Elm 获得的启示我估摸着前端开发的圈子一年能大约能诞生 500 多种架构[8]。如果我们需要一种新架构，那去前端那边抄一下大抵是不会错的。...另外，当我们有更多更复杂的 Reducer 时，我们也可以选择只在某个或某几个 Reducer 上调用 .debug() 来帮助调试。...不出意外，当 WithViewStore 接受的闭包满足 View 协议时，它本身也将满足 View，这也是为什么我们能在 CounterView 的 body 直接用它来构建一个 View 的原因。...当我们在 View 之间自上向下传递数据时，尽量保证把 Store 进行细分，就能保证模块之间互不干扰。...为数据文本添加颜色为了更好地看清数字的正负，请为数字加上颜色[13]：正数时用绿色显示，负数时用红色显示。添加一个 Reset 按钮除了加和减以外，添加一个重置按钮，按下后将数字复原为 0。

3.3K3 0

【React】211- 2019 React Redux 完全指南

“+” 时，会调用按钮的 onClick 处理器执行 increment 函数。...里，点击底部的 Console 按钮）。...为什么不传整个 state？在上面的例子中，我们的 state 结构已经是对的了，看起来 mapDispatchToProps 可能是不必要的。...按钮应该又重新生效了。试试这个！加一个重置按钮这有个小练习：给 counter 添加“重置”按钮，点击时 dispatch “RESET” action。... 的数据而不仅仅是 state.，因为我假设你可能会有不止一个 reducer，每一个都处理各自的 state。

4.2K2 0

redux你用对了吗？

维基百科里是这么定义纯函数的: 在程序设计中，若一个函数符合以下要求，则它可能被认为是纯函数此函数在相同的输入值时，需产生相同的输出。...为什么reducer需要返回一个全新的state 上面我们介绍了什么是纯函数，redux 里面规定 reducer 必须是一个纯函数，并且每个纯函数需要返回一个全新的state，那么这里大家肯定就有一个疑问...，为什么 reducer 必须要返回一个全新的 state，直接修改完了 state 再返回不行吗？...dispatch，发送一个 action，调用 reducer 来修改 state 里面的 title，我们点击“修改title名称”按钮，发现组件并没有按照我们的预期发生变化，但是查看state里面的数据发现...immer 上面我们已经分析了 redux 里面的 reducer 为什么要返回一个全新的 state，但是，如果按照上面 reducer 的写法，要修改的 state 树层级深了之后，修改起来无疑是非常麻烦的

5853 0

Redux 包教包会（一）：解救 React 状态危机

我们希望展示一个 todo 列表，当一个 todo 被点击时，它将被加上删除线表示此 todo 已经完成，我们还加上了一个输入框，使得用户可以增加新的 todo。...•Link 是一个展示过滤的按钮： •active: boolean 代表此时被选中，那么此按钮将不能被点击•onClick() 表示这个 link 被点击时将调用的回调函数。...在目前的富状态前端应用中，如果每一次状态的修改（例如点击一个按钮）都需要与后端通信，那么整个网站的平均响应时间将变得难以接受，用户体验将糟糕透顶。...之间的所有组件都会触发重新渲染，这带来了巨额的渲染开销，当我们的应用越来越复杂，这种开销显然是承受不起的。...一个 Action 就是一个简单的 JavaScript 对象： { type: 'ADD_TODO', text: '我是一只小小小图雀' } 我们可以看到一个 action 包含动作的类型，以及更新状态需要的数据

1.8K2 0

react结合redux实现一个购物车功能

http://cn.redux.js.org/docs/basics/Reducers.html 读完发现也没说啥，这里我简单介绍一下reducer，首先我们将store理解成一个容器，这个容器中存放着我们将来要在页面中使用...这里需要注意的是，item组件通过props接收到父组件传递的值后，直接将其绑定到了dom上，当点击选中复选框或者数量增减按钮时，我们并没有直接修改props，这是绝对不允许的，代码中是如何做的呢？...还有一点需要注意：不论是点击选中商品还是增减商品按钮，都是修改商品的状态，为什么要调用不同的action呢？...这里需要注意，当我们在修改商品数量的时候，其实是修改了两份数据，一份是store中的数据，一份是远端服务器的数据，这里有同学可能会问，为什么我们不修改完远端数据后，直接发送请求，然后发送异步请求得到新的数据再去渲染呢...我们定义一个all计算函数，这个函数返回结果计算商品是否被全部选中，我们将其和全选/反选复选框进行绑定，当store触发action时，这个all函数会重新计算，这样的话，当我们点击单件商品的选中状态，

4.8K3 0

React总结概括

当我们使用组件时，其实是对Main类的实例化——new Main，只不过react对这个过程进行了封装，让它看起来更像是一个标签。...切换页面的过程是在点击Link标签或者后退前进按钮时，会先发生url地址的转变，Router监听到地址的改变根据Route的path属性匹配到对应的组件，将state值改成对应的组件并调用setState...dispatch会立即触发reducer，有些时候我们不希望它立即触发，而是等待异步操作完成之后再触发，这时候用redux-thunk对dispatch进行改造，以前只能传入一个对象，改造完成后可以传入一个函数...action触发reducer改变了state时，需要再拿到新的state里的数据，毕竟数据才是我们想要的。...根据业务逻辑可以分为很多个reducer，然后通过combineReducers将它们合并，state树中有很多对象，每个state对象对应一个reducer，state对象的名字可以在合并时定义。

1.2K2 0

翻译 | Thingking in Redux（如果你只了解MVC）

你同时也意识到，之前你可以这么做： $(“.my-button”).click(); 让一个按钮干点什么；现在？3个小时可能你的一个按钮啥也干不了。...你的reducers将会掌管应用程序的当前状态（比如：用户信息、api载入的数据、需要展示的数据）。当一个action被调用时，reducer来决定需要做些什么。...它有一个方法来获得当前的状态，并且暴露出方法来订阅state的变动（使用“connect()”方法）。这就是Redux允许你调用action，并能将它们像props一样传入组件的秘密了。...Redux数据流。人生变得糟透了。在Redux中事情有些不同。假如你有一个组件，然后你想在按钮被按下的时候做些事情。那么你该从何开始呢？...在这个例子中，我将会展示如何编辑一个text input，然后当有用户按下按键时它将会调用action来保存内容。

1.4K10 0

社招前端二面react面试题集锦

当一个组件相关数据更新时，即使父组件不需要用到这个组件，父组件还是会重新render，可能会有效率影响，或者需要写复杂的shouldComponentUpdate进行判断。...为什么它很重要？组件状态数据或者属性数据发生更新的时候，组件会进入存在期，视图会渲染更新。...我现在有一个button，要用react在上面绑定点击事件，要怎么做？...class Demo { render() { return { alert('我点击了按钮') }}> 按钮 { alert('我点击了按钮') } render() { return <button onClick={this.onClick

2K6 0

翻译 | 我在 React-Native app开发中曾经犯过的11个错误

.例如,当你使用React Native开发应用程序的时候,你会比使用Cordova时写更多的代码. 3、如果你需要在已经已经开发完毕,并且已经有后端(所以,你可以使用现存的API)的webapp基础上创建一个...当我刚开始构建RN app的时候,我只把reducers作为每一个container的数据容器.所以如果你有登录,密码找回,ToDO list页面-reducer应该是比较简单-:SigIn,Forgot...在经过一段时间的store规划以后,我发现在我的程序中不太好管理数据了.我已经有了一个ToDo 详情页面.使用上面的想法,store需要一个ToDoDetails reducer是吗?...这是一个巨大的错误!为什么? 当我从ToDo List中选择出需要传递到ToDoDetail reducer的一项.这意味着使用了额外的actions 发送数据到reducer.非常的不合适....Dumb组件不应该知道周围的任何环境因素.仅仅只要执行和展示他们被告知的数据.经过这次”升级”之后.但是这个做法并不好,为什么? 如果我们把5作为id传递给组件,会发生什么?

7362 0

宝啊～来聊聊 9 种 React Hook

Button ，当我们点击 Button 时 count 的值会递增加一。...一个 p 标签，当我们点击 p 标签时定时器会在 3s 后打印出 count 的值。接下来让我们进行这样的操作: 点击 P 标签，快速点击三次 Click Me！之后。...没错，日常应用中我我也是这样使用的，存在多种复杂状态管理时利用 reducer 函数根据不同 action 去派发状态更新。...callback 函数作为 props ，当我们点击页面上的按钮来看看会发生什么: 每次点击父组件的 button 时，子组件中的 effect 中被执行了。...此时我们来看看页面的展示效果: 此时即使我们多次点击按钮，子组件的 Effect 也并不会执行了。你可以点击这里查看 CodeSanBox。

1K2 0

Redux 包教包会（二）：趁热打铁，重拾初心

所以当你点击单个待办事项时，浏览器会报错；当你点击底部的三个过滤器按钮时，浏览器不会有任何反应。...保存上述修改的代码，打开浏览器，你应该又可以继续点击底部的按钮来过滤完成和未完成的待办事项了： ?...编写 Reducer：todos 在 Redux 最佳实践中，因为 Reducer 对应修改 State 中的相关部分，当 State 对象树很大时，我们的 Reducer 也会有很多，所以我们一般会单独建一个...，进行数据改变时，要对数组进行操作，并最后返回一个新的数组。...•定义 mapDispatchToProps，它通过返回一个 onClick 函数，当组件点击时，调用生成一个 dispatch Action，将此时组件接收父级传下来的 ownProps.filter

2.3K4 0

加速MapReduce2

为什么会加速呢？这是因为排序时，我们将可以操作一段连续的内存空间，而操作其中一块时，可以进行CPU缓存加速。...Map slots会产生很多数据，然后进行shuffle，之后将数据传给reduce slots。在伪分布模式下，我没有重现这个问题；但当我在集群上运行作业时，问题就显现出来了。...MR2中，会用单独的线程来响应每一个请求，但是这没有反映为什么会产生这些问题。将shuffle阶段的磁盘读的次数打印出来，也没有得到任何有用的帮助。...因此在修订这个性能退化时，只需保证在reducer还没有完全取走map输出的数据前，shuffle不执行fadvise的DONTNEED操作。...总结我希望在进行性能退后的分析中，读者能从这些案例中得到帮助。当你用Eclipse编程时，疑惑着是否可以让一切都顺利进行，这些经历也许能给你一些小小的安慰。

3611 0

Redux原理分析以及使用详解（TS && JS)

某个组件的状态，需要共享某个状态需要在任何地方都可以拿到一个组件需要改变全局状态一个组件需要改变另一个组件的状态 1.2、为什么要用Redux 在React中，数据在组件中是单向流动的，这是react...的一个特点，单向数据流动，会让开发者阅读代码以及数据流向时更清楚，数据从一个方向父组件流向子组件（通过props）,但是这也伴随着一个问题，两个非父子组件之间通信就相对麻烦，例如A页面用到了B页面产生的数据...Redux的工作原理 1、首先我们找到最上面的state 2、在react中state决定了视图（UI），state的变化就会调用React的render（）方法，从而改变视图 3、用户通过一些事件（如点击按钮...reducer会根据传入的action的type值对state进行不同的操作，然后返回一个新的state，而不是在原有state的基础上进行修改,但是如果遇到了未知的（不匹配的）action，就会返回原有的...对于这个问题，在我这份代码里面，目前我想到了三个解决方法： 1、定义初始值loading为true，当我们dispatch成功把数据存入的时候，才将loading改为false，写一个加载动画，用这个loading

4.3K3 0

redux-saga_pub culture

下面是一个简单的例子：在用户提交表单的时候，我们想要做如下事情：校验一些输入信息 (简单，写在组件里) 弹起提示信息（聪明的我，一定要写一个公用的提示信息模块，这样别的页面引入就可以用了，呵呵呵呵...拿到后端返回状态（promise so easy…）隐藏提示信息 (这个有点难度，不过难不倒我，我给组建加一个控制属性) 更新redux store （dispatch咯。。。）...比如，做一个计数器按钮，用户需要不断的点击按钮，对后台数据更新，这里可以使用takeEvery来触发。...比如，我们需要一个刷新按钮，让用户可以手动的从后台刷新数据，当用户不停单机刷新的时候，应该最新一次的请求数据被刷新在页面上，这里可以使用takeLatest。...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

1.4K1 0

react-router 的使用与优化

可以使用 popstate 监听路由的变化： window.addEventListener('popstate',function(e){ console.log(e); }); 当点击路由按钮时...，并不会触发 popstate 事件，当点击浏览器的前进或者后退按钮时才会触发该事件。...history 还有三个方法，调用这三个方法相当于点击了前进或者后退按钮，但页面会刷新： back() 表示向后跳转一个页面； forward() 表示向前跳转一个页面； go(number) 当是负值时表示向后移动一个页面...有些组件可能一开始加载页面时并不会需要或者说不去渲染，而是点击某个按钮时才做展示。这些组件我们可以不放在打包好的代码中，而是触发事件时才去发起网络请求再渲染。...webpackPrefetch 的所用是：当浏览器空闲时（网络请求基本都请求完毕了），这时浏览器会在后台“偷偷”的下载我们异步加载的组件，这样当我们触发异步请求时其实组件数据已经在后台下载好了。

3.2K1 0

数栈技术文章分享：你居然是这样的initialValue

Input中的值为”value“，当我点击“更新value按钮”时，Input中的值不更新。...接收props.detail，因为在models/list.js文件的state中已经初始化，所以，第一次render被渲染的值是“杭州”和“1”，点击“重新获取数据按钮”，这个时候props.detail...下面的例子中在生命周期函数componentDidMount中执行了setFieldsValue方法，其他不变，你会发现不管怎么点击“重新获取数据按钮”，城市对应的值都不会被更新，而总量对应的值却一直在更新...如果你手动改变总量的输入，再点击“重新获取数据按钮”，此时城市和总量的值都不会被更新。...数栈是云原生—站式数据中台PaaS，我们在github和gitee上有一个有趣的开源项目：FlinkX，FlinkX是一个基于Flink的批流统一的数据同步工具，既可以采集静态的数据，也可以采集实时变化的数据

1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭