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

当我在redux中将student传递给action时,我的图像数组是空的,但它在postman中工作正常

当你在redux中将student传递给action时,图像数组为空的问题可能是由于以下几个原因导致的:

  1. 数据传递问题:首先,确保你正确地将student对象传递给了action。可以通过在action中打印student对象来验证是否正确接收到了数据。
  2. 异步操作问题:如果你在redux中使用了异步操作(例如使用redux-thunk或redux-saga),那么可能是异步操作导致了图像数组为空。在异步操作中,确保你正确地处理了异步请求并将返回的数据更新到redux store中。
  3. 图像数组初始化问题:如果你在redux中初始化了图像数组,并且在将student传递给action之前没有对其进行任何修改,那么图像数组可能会保持为空。确保在将student传递给action之前,你已经正确地初始化了图像数组,并且在action中对其进行了适当的处理。
  4. 后端数据处理问题:如果你在后端处理student数据并返回图像数组,那么问题可能出现在后端代码中。确保后端正确地处理了student数据,并返回了正确的图像数组。

综上所述,你可以按照以下步骤来解决图像数组为空的问题:

  1. 确保正确地将student对象传递给了action,并在action中验证是否正确接收到了数据。
  2. 如果使用了异步操作,确保正确地处理了异步请求并将返回的数据更新到redux store中。
  3. 检查图像数组是否正确地初始化,并在action中对其进行了适当的处理。
  4. 检查后端代码,确保正确地处理了student数据,并返回了正确的图像数组。

如果以上步骤都没有解决问题,建议进一步检查redux的配置和相关代码,以及后端代码的逻辑和处理方式。

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

相关·内容

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

Props 和 State 什么是 PropTypes 如何更新状态和不更新状态 组件生命周期方法 超越继承的组合 如何在React中应用样式 什么是Redux及其工作原理 什么是React路由器及其工作原理...下面是一个例子,数组中的每个元素都乘以 2,我们使用声明式map函数,让编译器来完成其余的工作,而使用命令式,需要编写所有的流程步骤。...下面是一个类组件的示例,它在构造函数中定义了props和state,每当使用this.setState() 修改状态时,将再次调用 render( ) 函数来更改UI中组件的输出。...它是如何工作的 在React中,组件连接到 redux ,如果要访问 redux,需要派出一个包含 id和负载(payload) 的 action。...redux-thunk是一个中间件。一旦它被引入到项目中,每次派发一个action时,都会通过thunk传递。如果它是一个函数,它只是等待函数处理并返回响应。如果它不是一个函数,它只是正常处理。

18.5K20

第二十篇:从 Redux 中间件实现原理切入,理解“面向切面编程”

经典的异步 Action 解决方案redux-thunk 在针对 Redux 源码主流程的分析中,我们不难看出这样一个规律:Redux 源码中只有同步操作,也就是说当我们 dispatch action...,在第 18 讲我们分析 createStore 整体源码时,曾经在 createStore 逻辑的开头见过这样一段代码: // 这里处理的是没有设定初始状态的情况,也就是第一个参数和第二个参数都传 function...这就不由得让人对 thunk 中间件加持下的 Redux 工作流心生好奇:action 入参必须是一个对象,这一点我们在第 19 讲分析 dispatch 源码时,可是亲眼见过 action 相关的数据格式强校验逻辑的...redux-thunk 的源码其实非常简洁,我第一次接触时还是在 2016 年,这么多年过去了,很多事情都变了,唯一不变的是 redux-thunk,它仍然那么好懂。...在源码的注释中,我已经标明,它返回的是一个接收 createStore 为入参的函数。这个函数将会作为入参传递给 createStore,那么 createStore 会如何理解它呢?

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

    什么是 Redux Action? 在 Redux 中,具有 type 属性的普通对象就被称为 action。...我整理了一个如何在 Redux 里做 Immutable 更新完全指南,包含更新 state 中对象和数组的七个通用模式。 安装 Immer 在 reducers 里面使用也是一种很好的方式。...Connect 做的是在 Redux 内部 hook,取出整个 state,然后把它传进你提供的 mapStateToProps 函数。...如果你实质上复制参数(state)给一个跟 state 相同的对象,这有什么意义呢? 在很小的例子中,可能会传全部 state,但通常你只会从更大的 state 集合中选择部分组件需要的数据。...那很正常。我有时也依旧会忘记。 如何使用 React Redux mapDispatchToProps 现在你知道 action 生成器是什么,我们可以讨论又一个级别的抽象。(我知道,我知道。

    4.3K20

    Redux 原理与实现

    而使用 Redux 库时,需要先做“配置”,因为这些代码的书写是必不可少的。下面的图是 redux 的工作流: ?...需要注意的是,在使用 Redux 时,最好不要监视最外层的容器,这样会把整个页面重新渲染,这是很浪费的,你应该绑定到像 App 这样的容器组件中。...首先拿出来对象的键进行遍历,accum 的初始值是一个空对象,currentKey 表示当前遍历的键。state[currentKey] 可能是没有的,默认值我们可能并没有指定,但并不影响。...middlewareAPI 是传递给中间件函数的参数,每个中间件在书写时都应该有一个参数,里面有 getState 方法和 dispatch 包装函数。而 chain 数组里面就是中间件函数。...在 redux 中也是如此,并且中间件是有顺序的,chain 数组最左侧的中间件会先调用,然后在内部调用 next 方法,表示执行下一个中间件。

    4.5K30

    关于前端面试你需要知道的知识点

    变化后数组的值是[4,3,2,1],key对应的下标也是:0,1,2,3 那么diff算法在变化前的数组找到key =0的值是1,在变化后数组里找到的key=0的值是4 因为子元素不一样就重新删除并更新...那为什么不要在循环、条件或嵌套函数中调用 Hook 呢?因为 Hooks 的设计是基于数组实现。在调用时按顺序加入数组中,如果使用循环、条件或嵌套函数很有可能导致数组取值错位,执行错误的 Hook。...在React中组件的props改变时更新组件的有哪些方法?...在一个组件传入的props更新时重新渲染该组件常用的方法是在componentWillReceiveProps中将新的props更新到组件的state中(这种state被成为派生状态(Derived State...很多时候你会使用数据中的 IDs 作为 keys,当你没有稳定的 IDs 用于被渲染的 items 时,可以使用项目索引作为渲染项的 key,但这种方式并不推荐,如果 items 可以重新排序,就会导致

    5.4K30

    前端react面试题(必备)2

    所谓 Pre-commit,就是说我在这个阶段其实还并没有去更新真实的 DOM,不过 DOM 信息已经是可以读取的了;Commit 阶段:在这一步,React 会完成真实 DOM 的更新工作。...整个应用的state被存储在一个object tree中,并且这个object tree 之存在唯一一个store中state是只读的 唯一改变state的方式是触发action,action是一个用于描述已经发生时间的对象...之后就会执行传参数为空数组:相当于componentDidMount如果传数组:相当于componentDidUpdate如果里面返回:相当于componentWillUnmount会在组件卸载的时候执行清除操作...array 控制useMemo重新执⾏行的数组,array改变时才会 重新执行useMemo不传数组,每次更新都会重新计算空数组,只会计算一次依赖对应的值,当对应的值发生变化时,才会重新计算(可以依赖另外一个...使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js 中,不再是掺杂在 action.js 或 component.js 中action摆脱thunk

    2.3K20

    前端一面必会react面试题(持续更新中)

    但是在已经使用redux来管理和存储全局数据的基础上,再去使用localStorage来读写数据,这样不仅是工作量巨大,还容易出错。那么有没有结合redux来达到持久数据存储功能的框架呢?...hooks父子传值父传子在父组件中用useState声明数据 const [ data, setData ] = useState(false)把数据传递给子组件的函数注销监听器hooks 常用的useEffct使用:如果不传参数:相当于render之后就会执行传参数为空数组:相当于componentDidMount...array 控制useMemo重新执⾏行的数组,array改变时才会 重新执行useMemo不传数组,每次更新都会重新计算空数组,只会计算一次依赖对应的值,当对应的值发生变化时,才会重新计算(可以依赖另外一个...尤雨溪在社区论坛中说道∶ 框架给你的保证是,你不需要手动优化的情况下,我依然可以给你提供过得去的性能。

    1.7K20

    20道高频react面试题(附答案)

    将 props 参数传递给 super() 调用的主要原因是在子构造函数中能够通过this.props来获取传入的 props传递了propsclass MyComponent extends React.Component...因为DOM的描绘非常消耗性能,如果能够在shouldComponentUpdate方法中能写出更优化的 diff算法,极大的提高性能react 父子传值父传子——在调用子组件上绑定,子组件中获取this.props...Dva工作原理集成redux+redux-saga工作原理改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过 dispatch 发起一个 action...将 props 参数传递给 super() 调用的主要原因是在子构造函数中能够通过this.props来获取传入的 props。...(5)都可以放在单独的HTML文件中,或者放在 Webpack设置的一个更复杂的模块中。(6)都有独立但常用的路由器和状态管理库。

    1.3K30

    redux-saga学习

    大家好,又见面了,我是你们的朋友全栈君。...sagas监听发起的action,然后决定基于这个action来做什么 (比如:是发起一个异步请求,还是发起其他的action到store,还是调用其他的sagas 等 ) 在redux-saga的世界里...在 yield delay(1000) 的情况下,yield 后的表达式 delay(1000) 在被传递给 next 的调用者之前就被执行了(当运行我们的代码时,调用者可能是 middleware。...反向控制 在 takeEvery 的情况中,被调用的任务无法控制何时被调用, 它们将在每次 action 被匹配时一遍又一遍地被调用。并且它们也无法控制何时停止监听。...Task 一个 task 就像是一个在后台运行的进程。在基于 redux-saga 的应用程序中,可以同时运行多个 task。

    2.7K10

    前端常见手写面试题(持续更新中)

    )); } return mappedArr;}实现redux-thunkredux-thunk 可以利用 redux 中间件让 redux 支持异步的 action// 如果 action 是个函数...,但一个对象的状态发生改变时,所依赖它的对象都将得到状态改变的通知。...发布/订阅模式是观察者模式的一种变形,两者区别在于,发布/订阅模式在观察者模式的基础上,在目标和观察者之间增加一个调度中心。...arr;}思想: 双重 for 循环是比较笨拙的方法,它实现的原理很简单:先定义一个包含原始数组第一个元素的数组,然后遍历原始数组,将原始数组中的每个元素与新数组中的每个元素进行比对,如果不重复则添加到新数组中...;这种方法是利用高阶函数 reduce 进行去重, 这里只需要注意initialValue得放一个空数组[],不然没法push实现bind方法bind 的实现对比其他两个函数略微地复杂了一点,涉及到参数合并

    66320

    第十八篇: 揭秘 Redux 设计思想与工作原理(上)

    这些年不管是面试、还是帮读者答疑,我有一个很强烈的感受:很多人对 Redux 的基本操作很熟悉,甚至对它的运作机制也有所了解,但就是不明白为什么要用 Redux,更不清楚 Redux 到底解决了什么问题...Redux 关键要素与工作流回顾 Redux 库和 Flux 架构之间可以说是“你侬我侬”,虽然 Redux 在实现层面并没有按照 Flux 那一套来(比如 Flux 中允许多个 Store 存在,而...Redux 中只有一个 Store 等),但 Redux 在设计思想上确实和 Flux 一脉相承。...: 在 Redux 的整个工作过程中,数据流是严格单向的。...createStore 方法是我们在使用 Redux 时最先调用的方法,它是整个流程的入口,也是 Redux 中最核心的 API。

    88110

    高级前端react面试题总结

    调和阶段 setState内部干了什么当调用 setState 时,React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态这将启动一个称为和解(reconciliation)...与组件上的数据无关的加载,也可以在constructor里做,但constructor是做组件state初绐化工作,并不是做加载数据这工作的,constructor里也不能setState,还有加载的时间太长或者出错...所谓 Pre-commit,就是说我在这个阶段其实还并没有去更新真实的 DOM,不过 DOM 信息已经是可以读取的了;Commit 阶段:在这一步,React 会完成真实 DOM 的更新工作。...使用redux-saga中间件redux-saga优点:异步解耦: 异步操作被被转移到单独 saga.js 中,不再是掺杂在 action.js 或 component.js 中action摆脱thunk...但其子组件会触发正常的生命周期方法,包括 shouldComponentUpdate() 方法。如果标记发生变化,React 仍将只更新 DOM。

    4.1K40

    如何在 React 应用中使用 Hooks、Redux 等管理状态

    总结 React 中的状态是什么 在现代 React 中,我们使用函数组件构建我们的应用程序。...但是有了状态之后,React 函数组件即使在执行后也可以存储信息。当我们需要一个组件来存储或“记住”某些东西,或者根据环境以不同的方式执行时,状态就是我们所需要的可以让这些生效的东西。...显而易见的答案是“提升”状态,这意味着父组件将成为持有状态的组件,并将状态作为 prop 传递给子组件。 这很好用,但是当我们有很多嵌套组件时,可能需要通过许多层级组件传递 props。...在 Redux 中,store 是拥有所有应用程序状态信息的实体。多亏 Redux,我们能够从任何想要的组件中访问 store(就像使用 context 一样)。...在示例中,你可以看到我们在调用 ADDSOME/SUBSOME 时可以直接从组件中传递我们想要加/减的数字。

    8.5K20

    React进阶(3)-上手实践Redux-如何改变store中的数据

    '){           // 对原有的state进行一个深拷贝,在redux中,redux是不允许直接修改state的,但可以接收state,这也是为什么当我们拿到state后,我们需要拷贝一份数据...最后在组件移除时,销毁时,在componentWillUnmount中取消store的订阅事件 // 组件卸载,移除时调用该函数,一般取消,清理已注册的订阅,定时器的清理,取消网络请求,在这里面操作     ...,通过数组的splice方法实现,第一个参数代表的是删除哪个,第二个是删除一个         return newState;     } 至于上面添加了一个当删除列表时,模态框的确认操作,至于添加一些组件是放在...,在各个文件之间进行切换,对于初学者,是很容易绕晕的.当然如果你是大神,就另当别论了的 上面的代码是次要的,重要的是理清Redux中store,React Component,action creators...,Vue中也有vuex这样的数据流管理框架,使用起来也是大同小异,两个各有优点,都很强 使用React编写代码更偏向底层一些的,虽然Redux比较绕,但都是有固定的套路流程的,其中理解Redux的工作流程是非常重要的

    2.6K30

    hook+react-redux让redux使用更简单

    我想,redux的名声在前端领域里应该是非常响亮的。...而对应的,它的社区也是非常活跃,因此,当我们希望在一个React项目中引入redux进行状态管理的话,我们只需要引入react-redux 下边的例子中,会引入redux-thunk让store支持异步更新...redux核心概念 store action reducer 实际上,在react-redux中我们只需要了解这三个概念即可使用redux,而实际上这些也不难理解。...我们完全可以将store当成一个state总仓库,当成一个超大的state 正常来讲 组件与组件之间传值的关系是这样的 我们可以看到,当我们试图把father组件的state值传到child-2...可以看到,直接修改组件的state是无法触发视图层更新的。在store中,类似的,store中的state是只读的,我们想要更新store中的state,只能通过预先制定好的action触发更新。

    79740

    React 设计模式 0x1:组件

    useEffect 接受两个参数,分别是: 带有可选的返回语句的函数 可选的返回语句是一个函数,它在组件卸载时执行,用于进行清理工作,如定时器、事件监听器等 可选的依赖项数组 当不传入依赖项数组时,...useEffect 会在每次渲染时执行 当传入依赖项数组时 如果数组为空,则 useEffect 只会在组件挂载时执行 如果数组不为空,则 useEffect 会在组件挂载时执行,以及当数组中的任何值发生变化时执行...尝试编写测试 测试可以确保您的组件按预期工作,并在编写得当时减少应用程序中的错误数量 # 组件数据共享 在 React 中,一定会在在组件之间共享数据,具体实现方式取决于状态变化的复杂程度和应用程序的大小...以下是一些实现方式: Props Context API Redux useReducer # Props Props 是在 React 中从一个组件传递数据到另一个组件的一种方式,props 是从父组件传递到子组件的对象...Actions Action 是一个 JavaScript 对象,告诉 Reducer 用户希望在 Store 中执行什么操作 Action 是用户的指令,用于在 Store 中要么更改状态,要么创建状态的副本

    88610

    React进阶(1)-理解Redux

    对于技术性的投入,我从来都是不吝啬的,主动学习是对自己最好的投资 (Redux的确理解有些绕,但并不代表学不会,多读书,多实践,巩固基础) 反之,则以下则是没有必要使用Redux UI层非常简单,只是用于渲染...,那么就会变得非常繁琐 在小型项目中,Redux并不是必需的,但是使用Redux却是一劳永逸的,管理组件的状态方便得多,对于大型应用来说,单纯使用原始的数据传递方式 那么组件之间的传值会变得非常复杂,如果要做一个大型的应用...,是放到reducer里面去管理,Store从Reducer中拿到返回的数据state,最后供外部组件的取用 当红色圆圈组件想要改变数据传递给其他组件时,只需要去改变Store里面的存储红色圆圈组件的数据就可以了...这样一来,红色圆圈组件的数据就非常容易的传递给其他组件了,无论是它的父级组件还是兄弟,非兄弟组件的 Redux就是把组件的数据放到一个公共的区域(仓库)中进行存储,当改变Store存储区域里面的数据时,...,就要改变组件的应用状态,但时改变组件状态的方法不是直接去修改状态上的值,而是创建一个新的状态对象返回给Redux,由Redux完成新的状态的组装 组件数据的改变只能通过纯函数完成 所谓的纯函数,就是指

    1.2K20

    【React】945- 你真的用对 useEffect 了吗?

    3.1 无限循环 当useEffect的第二个参数传数组传一个依赖项,当依赖项的值发生变化,都会触发useEffect执行。...初始状态是一个object,其中的hits为一个空数组,目前还没有请求后端的接口。...我们可以传递一个空数组作为useEffect的第二个参数,这样就能避免在组件更新执行useEffect,只会在组件mount时执行。...如果包含变量的数组为空,则在更新组件时useEffect不会再执行,因为它不会监听任何变量的变更。 再看这个例子: 业务场景:需要在页面一开始时得到一个接口的返回值,取调用另一个接口。...,还需要将这个query值传递给后台,这个操作会在useEffect中进行 前面我们说了,目前的useEffect只会在组件mount时执行,并且useEffect的第二个参数是依赖的变量,一旦这个依赖的变量变动

    9.6K20

    Redux的中间件Middleware不难,我信了^_^

    Redux的中间件究竟是如何工作的?本文来给你解惑,Redux中间件从零到“放弃”。 本文的参考网站只有二个,首当其冲的就是Redux的官方网站,本文的思考过程大多参考官方给出的例子。...三层函数啊,第一层为了传递store的dispatch(action)和getState()方法,第二层传递的参数next是下一个待执行的中间件,第三层是函数本体了,传递的参数action是为了最终传递给...此处需要注意dispatch因为我们需要传递的dispatch是变异之后的,而不是原生的。所以边我们改写下dispatch的方法,让中间件调用此方法时,是变异后的dispatch。...,这里我写的中间件的功能是是如果action是函数,那么就返回函数的执行结果,并且向函数中传入dispatch和getState方法。...这样就可以在action函数中调用dispatch了。机智如你一定发现了这个就是异步的一个实现,也就是redux-thunk的基本逻辑。(其实就是参照redux-thunk写的。)

    54141
    领券