首页
学习
活动
专区
工具
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 会如何理解它呢?

40630
  • 【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.2K20

    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 =01,变化后数组里找到key=04 因为子元素不一样就重新删除并更新...那为什么不要在循环、条件或嵌套函数调用 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 之存在唯一一个storestate只读 唯一改变state方式触发actionaction一个用于描述已经发生时间对象...之后就会执行参数为数组:相当于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)把数据传递给子组件<Child data={data} /...)注册监听器;通过 subscribe(listener)返回函数注销监听器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 实现对比其他两个函数略微地复杂了一点,涉及到参数合并

    66120

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

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

    79810

    高级前端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 设计模式 0x1:组件

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

    87110

    React进阶(1)-理解Redux

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

    1.2K20

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

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

    2.6K30

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

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

    53841

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

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

    9.6K20

    hook+react-reduxredux使用更简单

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

    79140
    领券