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

为什么我的输入值在Redux状态改变时没有更新?

在Redux中,当输入值没有更新的原因可能有以下几点:

  1. 没有正确地连接Redux和组件:确保你的组件已经通过connect函数连接到Redux的store,并且正确地映射了state和dispatch到组件的props中。
  2. 没有正确地更新Redux的状态:Redux的状态是不可变的,你需要通过创建新的state对象来更新它。确保你在Reducer中返回一个新的state对象,而不是直接修改原始的state对象。
  3. 没有正确地触发Redux的action:Redux的状态更新是通过dispatching action来触发的。确保你在组件中正确地dispatch了一个action,并且这个action被Reducer捕获并更新了状态。
  4. 没有正确地订阅Redux的状态变化:在组件中,你需要使用mapStateToProps函数来订阅Redux的状态变化,并将状态值映射到组件的props中。确保你正确地使用了mapStateToProps函数,并且将输入值从Redux的状态中获取。
  5. 没有正确地使用输入值:确保你在组件中正确地使用了输入值。检查你的组件是否正确地将输入值绑定到表单元素的value属性上,并且在输入值发生变化时触发了相应的事件处理函数。

如果你的输入值在Redux状态改变时仍然没有更新,可以逐一检查以上可能的原因,并进行相应的调试和修复。

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

相关·内容

Redux框架reducer对状态的处理

为什么要创建副本state 在redux-devtools中,我们可以查看到redux下所有通过reducer更新state的记录,每一条记录都对应着内存中某一个具体的state,使得用户可以追溯到每一次历史操作产生与执行的状态...然而,在对b1对象的b3.b5进行修改时,则x和y的值同时发生了改变,即在x和y内部,其在内存中是同一个引用地址。也就是说,这种assign来复制对象的方式并没有做到真正的不变!...外部插件直接更新state是否合理? 我目前接触较多的外部插件为redux-form。此处暂以redux-form更新state的方式进行一些探讨。...问题在于,每次表单的更新,redux-form都会发起一次action,这意味着我们在一个input框里输入一句简单的"hello world",默认情况下将会有11个state副本产生。...小结 就redux-form而言,在一些场景中,能明显感受到输入操作存在顿挫感。显然,当我们在选择外部插件时,需要合理考虑其对state的处理方式。

2.2K50

浅尝辄止,React是如何工作的

当组件更新时,实例保持不变,以便在渲染之间保持状态。...最后,就是在真实DOM进行操作,apply这些差异,更新和渲染了。 ---- 为什么Redux 需要 reducers是纯函数?...--某面试官 纯函数 从本质上讲,纯函数的定义如下:不修改函数的输入值,依赖于外部状态(比如数据库,DOM和全局变量),同时对于任何相同的输入有着相同的输出结果。...举个例子,下面的add函数不修改变量a或b,同时不依赖外部状态,对于相同的输入始终返回相同的结果。...如果你在reducer内部直接修改旧的state对象的属性值,那么新的state和旧的state将都指向同一个对象。因此Redux认为没有任何改变,返回的state将为旧的state。

68830
  • React 入门学习(十六)-- 数据共享

    作为了 key 值,这样也确保了 key 的唯一性,关于 key 的作用,可以看看 diffing 算法的文章 状态管理 在这里我们需要非常熟练的采用 this.props.add 的方式来更新状态...那么它是如何实现状态更新的呢?...根据操作类型来指定状态的更新 也就是说当我们点击了添加按钮后,会将输入框中的数据整合成一个对象,作为当前 action 对象的 data 传递给 reducer 我们可以看看我们编写的 action 文件...这个是高阶函数部分的知识了,纯函数是一个不改变参数的函数,也就是说,传入的参数是不能被改变的。 为什么要提这个呢?...在我们 return 时,有时候会想通过数组的 API 来在数组前面塞一个值,不也可以吗?

    33620

    React 入门学习(十六)-- 数据共享

    作为了 key 值,这样也确保了 key 的唯一性,关于 key 的作用,可以看看 diffing 算法的文章 状态管理 在这里我们需要非常熟练的采用 this.props.add 的方式来更新状态...那么它是如何实现状态更新的呢?...根据操作类型来指定状态的更新 也就是说当我们点击了添加按钮后,会将输入框中的数据整合成一个对象,作为当前 action 对象的 data 传递给 reducer 我们可以看看我们编写的 action 文件...这个是高阶函数部分的知识了,纯函数是一个不改变参数的函数,也就是说,传入的参数是不能被改变的。 为什么要提这个呢?...在我们 return 时,有时候会想通过数组的 API 来在数组前面塞一个值,不也可以吗?

    43910

    在使用Redux前你需要知道关于React的8件事

    通常人们会同时学习React和Redux,但这有一些缺点: 他们不会遇到在仅使用本地组件状态(this.state)时,扩展状态管理时出现的问题 因此他们没法理解为什么需要Redux这一类状态管理工具...,组件就会重新渲染.在上面的例子中,应用会展示更新后的值:this.state.counter.基本上在React的单向数据流中只会存在一条闭环....(this.state.counter)只是当前时间的一个快照而已.因此当你用this.setState()更新本地状态时,而本地状态又在异步执行更新完成之前改变了,这时你就操作了一个旧的状态.第一次遇到类似问题的时候或许会有点难以理解...state: { counter: 1 } // 而不是: { counter: 3 } 就如你看到的那样,当根据本地状态更新状态时,本地状态作为更新状态.这会导致bug的.这也是为什么会有第二种更新React...译者后注: 希望我拙劣的翻译没有为你理解本文增加难度,再说一次最好还是看英文原文,如有改进建议请大方联系,我必虚心受教.

    1.2K80

    前端react面试题(必备)2

    它有几个特点:给定相同的输入,总是返回相同的输出。过程没有副作用。不依赖外部状态。this.props就是汲取了纯函数的思想。...props的不可以变性就保证的相同的输入,页面显示的内容是一样的,并且不会产生副作用为什么使用jsx的组件中没有看到使用react却需要引入react?...所谓 Pre-commit,就是说我在这个阶段其实还并没有去更新真实的 DOM,不过 DOM 信息已经是可以读取的了;Commit 阶段:在这一步,React 会完成真实 DOM 的更新工作。...useLayoutEffect:useLayoutEffect在浏览器渲染前执行useEffect在浏览器渲染之后执行当父组件引入子组件以及在更新某一个值的状态的时候,往往会造成一些不必要的浪费,而useMemo...是一个函数用于处理逻辑array 控制useMemo重新执⾏行的数组,array改变时才会 重新执行useMemo不传数组,每次更新都会重新计算空数组,只会计算一次依赖对应的值,当对应的值发生变化时,才会重新计算

    2.3K20

    使用 Redux 之前要在 React 里学的 8 件事

    通常大家会同时学习 React 和 Redux,但这会产生一些问题: 在仅使用本地状态(this.state)的场景下,大家从不会遇到跨页面状态管理的问题 因此不会理解为什么需要一个像 Redux 这样的状态管理库...不过,现在你决定了要跳上 Redux 的列车,所以就有了我的这张清单,它包含了在使用 Redux 前你所应该知道的 React 的内容。...一旦状态被更新,那么组件会重新渲染,在之前的例子里面,它会显示更新值:this.state.counter。基本上,这就是一个 React 非定向数据流的闭环。...如果状态没有在该组件或其子组件中用到,它就应该被向下提升到与其相关的需要这个状态的组件上。 你可以在 官方文档 读到更多关于提升 React 状态的部分。...通常,当使用一个复杂状态管理库的时候,比如 Redux 和 MobX,你在某个地方把状态管理层连接到 React 视图层上,这就是为什么你在 React 中提及高阶组件。

    1.1K20

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

    所谓 Pre-commit,就是说我在这个阶段其实还并没有去更新真实的 DOM,不过 DOM 信息已经是可以读取的了; Commit 阶段:在这一步,React 会完成真实 DOM 的更新工作。...受控组件更新state的流程: 可以通过初始state中设置表单的默认值 每当表单的值发生变化时,调用onChange事件处理器 事件处理器通过事件对象e拿到改变后的状态,并更新组件的state 一旦通过...setState方法更新state,就会触发视图的重新渲染,完成表单组件的更新 受控组件缺陷: 表单元素的值都是由React组件进行管理,当有多个输入框,或者多个这种组件时,如果想同时获取到全部的值就必须每个都要编写事件处理函数...(2)非受控组件 如果一个表单组件没有value props(单选和复选按钮对应的是checked props)时,就可以称为非受控组件。在非受控组件中,可以使用一个ref来从DOM获得表单值。...在React中组件的props改变时更新组件的有哪些方法?

    2.3K30

    redux你用对了吗?

    第二点,state 是只读的,因此,我们在任何时候都不应该直接修改 state,唯一能改变 state 的方法就是通过 dispatch 一个 action,间接的来修改,以此来保证对大型应用的状态进行有效的管理...维基百科里是这么定义纯函数的: 在程序设计中,若一个函数符合以下要求,则它可能被认为是纯函数 此函数在相同的输入值时,需产生相同的输出。...函数的输出和输入值以外的其他隐藏信息或状态无关,也和由I/O设备产生的外部输出无关。 该函数不能有语义上可观察的函数副作用,诸如“触发事件”,使输出设备输出,或更改输出值以外物件的内容等。...App 作为Title 和Content 的父组件,有一个默认的 state 状态树,结构如下: 初始state: { book: { title: { tip: '我是标题',...,所以,当 reducer 函数直接返回旧的 state 对象时,这里的浅比较就会失败,redux 认为没有任何改变,从而导致页面更新出现某些意料之外的事情。

    59030

    干货 | 浅谈React数据流管理

    在本文正式开始之前,我先试图讲清楚两个概念,状态和数据: 我们都知道,react是利用可复用的组件来构建界面的,组件本质上是一个有限状态机,它能够记住当前所处的状态,并且能够根据不同的状态变化做出相应的操作...; 3)reducer:提供了一个纯函数,用来计算状态的变更; 为什么需要redux?...如果站在传统的命令式编程的角度来看这段公式:c的值完全依赖于a和b,这时候我们去改变a的值,那我们就需要再去手动计算a + b的值,a、b和c是相互依赖的。...那么如何帮助react实现状态管理呢,我们只需要将组件作为事件响应者,然后在next回调里定义好更新组件状态的动作setState,当接收到数据推送时,就会自动触发setState,完成界面更新,这其实有点类似于...,且数据流(尤其是异步数据)混杂时,建议使用rxjs; 其实回顾全篇,我没有提到一个关键点是,各个库的性能对比如何。

    2K20

    前端react面试题总结

    为什么调用 setState 而不是直接改变 state?解答如果您尝试直接改变组件的状态,React 将无法得知它需要重新渲染组件。通过使用setState()方法,React 可以更新组件的UI。...但是在已经使用redux来管理和存储全局数据的基础上,再去使用localStorage来读写数据,这样不仅是工作量巨大,还容易出错。那么有没有结合redux来达到持久数据存储功能的框架呢?...区别 函数组件类组件是否有 this 没有 有 是否有生命周期 没有 有 是否有状态 state没有 有 React 中 keys 的作用是什么?...this.setState() 修改状态的时候 会更新组件this.forceUpdate() 强制更新组件件render之后,子组件使用到父组件中状态,导致子组件的props属性发生改变的时候 也会触发子组件的更新...生命周期是在props更新时触发。

    2.5K30

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

    (1)受控组件 在使用表单来收集用户输入时,例如等元素都要绑定一个change事件,当表单的状态发生变化,就会触发onChange事件,更新组件的state。...受控组件更新state的流程: 可以通过初始state中设置表单的默认值 每当表单的值发生变化时,调用onChange事件处理器 事件处理器通过事件对象e拿到改变后的状态,并更新组件的state...一旦通过setState方法更新state,就会触发视图的重新渲染,完成表单组件的更新 受控组件缺陷: 表单元素的值都是由React组件进行管理,当有多个输入框,或者多个这种组件时,如果想同时获取到全部的值就必须每个都要编写事件处理函数...(2)非受控组件 如果一个表单组件没有value props(单选和复选按钮对应的是checked props)时,就可以称为非受控组件。在非受控组件中,可以使用一个ref来从DOM获得表单值。...当一个组件中的状态改变时,React 首先会通过 “diffing” 算法来标记虚拟 DOM 中的改变,第二步是调节(reconciliation),会用 diff 的结果来更新 DOM。

    7.6K10

    一天梳理完react面试题

    ,就会触发一次额外的渲染,多调用了一次 render 函数,由于它是在浏览器刷新屏幕前执行的,所以用户对此是没有感知的,但是我应当避免这样使用,这样会带来一定的性能问题,尽量是在 constructor...(1)受控组件 在使用表单来收集用户输入时,例如等元素都要绑定一个change事件,当表单的状态发生变化,就会触发onChange事件,更新组件的state...受控组件更新state的流程:可以通过初始state中设置表单的默认值每当表单的值发生变化时,调用onChange事件处理器事件处理器通过事件对象e拿到改变后的状态,并更新组件的state一旦通过setState...方法更新state,就会触发视图的重新渲染,完成表单组件的更新受控组件缺陷: 表单元素的值都是由React组件进行管理,当有多个输入框,或者多个这种组件时,如果想同时获取到全部的值就必须每个都要编写事件处理函数...=id0的值也是1因为子元素相同,就不删除并更新,只做移动操作,这就提升了性能为什么 React 要用 JSX?

    5.5K30

    设计师都能懂的 Redux 指南

    我的目标是帮助像你们这样的设计师。即使您以前没有写过一行代码,我认为理解 Redux仍然是可能的、有益的和有趣的。 什么是 Redux 在超高水平上,Redux 是开发人员用来简化他们工作的工具。...你们很多人可能都听说过,它的工作是状态管理。稍后我将解释状态管理的含义, 此刻,我只能想让你看下面这张图: 为什么要了解 Redux Redux 更多的是关于应用程序的内部工作而不是它的外观和感受。...因此,如果你的团队使用 Redux 的唯一原因是为了提取数据,不妨认真考虑升级到 React 16.3! 改变数据 有时候,在应用程序中更新数据的逻辑可能相当复杂。它可能涉及多个相互依赖的步骤。...在更新应用程序状态之前,可能需要等待多个服务器的响应。我们可能需要在不同的时间、不同的条件下更新多处 state 的状态。...在大多数情况下,这不是什么大问题,而且放缓并不明显。 仍然,当存储中存在大量数据并且当数据频繁改变时(例如,当用户在移动设备上快速键入时),UI 可能因此变得缓慢。

    1.7K10

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

    启动虛拟机后,在cmd中输入 adb devices可以查看设备。redux中间件中间件提供第三方插件的模式,自定义拦截 action -> reducer 的过程。...这种机制可以让我们改变数据流,实现如异步action ,action 过滤,日志输出,异常报告等功能redux-logger:提供日志输出redux-thunk:处理异步操作redux-promise:...为什么它很重要?组件状态数据或者属性数据发生更新的时候,组件会进入存在期,视图会渲染更新。...如果我们知道用户界面的某一部分不会改变,那么没有理由让 React弄清楚它是否应该更新渲染。...它不但没有问题,而且如果根据以前的状态( state)以及属性来修改当前状态,推荐使用这种写法。在 React中元素( element)和组件( component)有什么区别?

    2K60

    React进阶(1)-理解Redux

    ,这不区分于无论是外部的props还是内部的state,而组件之间有时需要共享传递数据,Redux仅仅就是用来管理这些组件的状态的 在一些开发者眼里,项目里要是没有用到Redux,就觉得很low,要么把...,然后最终在返回给我,实现房子的替换 那么转换为代码理解:  页面上的一个组件,想要获取更新Store中的数据,跟Store说,我点击这个按钮,要更新这个组件的数据,要干什么事情,做的这个具体动作就是...单向数据流 唯一数据源 保持状态只读 数据的改变只能通过纯函数reducer来完成 单向数据流: 这个其实与props不能直接被修改一样,在父组件向子组件传递数据时是通过属性的方式进行传递的,而子组件内部通过...,就要改变组件的应用状态,但时改变组件状态的方法不是直接去修改状态上的值,而是创建一个新的状态对象返回给Redux,由Redux完成新的状态的组装 组件数据的改变只能通过纯函数完成 所谓的纯函数,就是指...它是为了描述Action如何改变组件的状态的 这也是为什么Redux这个名称比较抽象的原因,其中Reducer类似一个数组中的迭代器函数reduce var arr = [1,2,3,4,5,6] var

    1.5K22

    阿里前端二面必会react面试题总结1

    useEffect(callback, source)接受两个参数callback: 钩子回调函数;source: 设置触发条件,仅当 source 发生改变时才会触发;useEffect钩子在没有传入...为什么它很重要?组件状态数据或者属性数据发生更新的时候,组件会进入存在期,视图会渲染更新。...如果我们知道用户界面的某一部分不会改变,那么没有理由让 React弄清楚它是否应该更新渲染。...启动虛拟机后,在cmd中输入 adb devices可以查看设备。redux有什么缺点一个组件所需要的数据,必须由父组件传过来,而不能像flux中直接从store取。...它有几个特点:给定相同的输入,总是返回相同的输出。过程没有副作用。不依赖外部状态。this.props就是汲取了纯函数的思想。

    2.8K30

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

    某个组件的状态,需要共享 某个状态需要在任何地方都可以拿到 一个组件需要改变全局状态 一个组件需要改变另一个组件的状态 1.2、为什么要用Redux 在React中,数据在组件中是单向流动的,这是react...(如点击按钮,移动鼠标)就会向reducer派发一个action 4、reducer接受到action后就会去更新state 5、store是包含了所有的state,可以把它看作所有状态的集合 Redux...();//订阅一个函数,每当state改变时,都会去调用这个函数 三、Redux中间件机制 Redux本身就提供了非常强大的数据流管理功能,但这并不是它唯一的强大之处,它还提供了利用中间件来扩展自身功能...) },[]) ) } BUG分享 需求:一个接口,需要在多个页面调用,而且多个页面互相没有关联,我在每个页面都去调用这个接口,显然这是浪费性能的,我就想在react入口文件去调用...对于这个问题,在我这份代码里面,目前我想到了三个解决方法: 1、定义初始值loading为true,当我们dispatch成功把数据存入的时候,才将loading改为false,写一个加载动画,用这个loading

    4.5K30

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

    传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。为什么不直接更新 state 呢 ?...它不但没有问题,而且如果根据以前的状态( state)以及属性来修改当前状态,推荐使用这种写法。...就去渲染对应的组件,若没有定义组件 则报错当根据数据遍历生成的标签,一定要给标签设置单独的key 否则会报错hooks 为什么不能放在条件判断里以 setState 为例,在 react 内部,每个组件...,在异步中如果对同一个值进行多次 setState,setState 的批量更新策略会对其进行覆盖,去最后一次的执行,如果是同时 setState 多个不同的值,在更新时会对其进行合并批量更新合成事件中是异步钩子函数中的是异步原生事件中是同步...React具有浓重的函数式编程的思想。提到函数式编程就要提一个概念:纯函数。它有几个特点:给定相同的输入,总是返回相同的输出。过程没有副作用。不依赖外部状态。

    3K20

    React进阶(1)-理解Redux

    ,这不区分于无论是外部的props还是内部的state,而组件之间有时需要共享传递数据,Redux仅仅就是用来管理这些组件的状态的 在一些开发者眼里,项目里要是没有用到Redux,就觉得很low,要么把...对于技术性的投入,我从来都是不吝啬的,主动学习是对自己最好的投资 (Redux的确理解有些绕,但并不代表学不会,多读书,多实践,巩固基础) 反之,则以下则是没有必要使用Redux UI层非常简单,只是用于渲染...在Redux中有以下几个设计基本原则 单向数据流 唯一数据源 保持状态只读 数据的改变只能通过纯函数reducer来完成 单向数据流: 这个其实与props不能直接被修改一样,在父组件向子组件传递数据时是通过属性的方式进行传递的...,就要改变组件的应用状态,但时改变组件状态的方法不是直接去修改状态上的值,而是创建一个新的状态对象返回给Redux,由Redux完成新的状态的组装 组件数据的改变只能通过纯函数完成 所谓的纯函数,就是指...它是为了描述Action如何改变组件的状态的 这也是为什么Redux这个名称比较抽象的原因,其中Reducer类似一个数组中的迭代器函数reduce var arr = [1,2,3,4,5,6] var

    1.2K20
    领券