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

为什么mapStateToProps有Eslint警告“返回承诺的函数必须是异步的”?

mapStateToProps是React Redux中的一个函数,用于将Redux store中的数据映射到组件的props上。它接收两个参数,第一个参数是state,第二个参数是ownProps(组件自身的props)。

根据问题描述,mapStateToProps函数出现了Eslint警告“返回承诺的函数必须是异步的”。这个警告是因为在mapStateToProps函数中,返回的函数应该是同步的,而不是异步的。

在React Redux中,mapStateToProps函数的返回值是一个对象,该对象包含了需要从Redux store中获取的数据。这个返回值应该是一个纯粹的同步函数,而不是一个返回Promise的异步函数。

如果在mapStateToProps函数中使用了异步操作,比如调用了异步的API请求或者使用了异步的数据处理方法,那么就会触发Eslint警告。这是因为在React Redux中,数据的获取和处理应该放在组件的生命周期方法中,比如componentDidMount或者componentDidUpdate中,而不是在mapStateToProps函数中。

解决这个问题的方法是将异步操作移到组件的生命周期方法中,然后在该方法中调用Redux的异步操作方法,比如dispatch一个action来获取数据,并将数据存储到Redux store中。然后在mapStateToProps函数中,通过返回store中的数据来更新组件的props。

总结起来,mapStateToProps函数应该是一个纯粹的同步函数,用于将Redux store中的数据映射到组件的props上。如果在该函数中使用了异步操作,会触发Eslint警告。解决方法是将异步操作移到组件的生命周期方法中,并在该方法中使用Redux的异步操作方法来获取和处理数据。

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

相关·内容

为什么vue中data必须一个函数

引用类型与函数区别 引用类型与函数 object引用类型,如果不用function返回,每个组件data都是内存同一个地址,一个数据改变了其他也改变了。...js中只有函数构成作用域(只有函数{}构成作用域,对象{}以及if(){}都不构成作用域),data一个函数时,每个组件实例都有自己作用域,每个实例相互独立,不会互相影响。...,另外一个实例也会跟着改; 两个实例必须有自己各自作用域才行,需要通过下列方法进行处理 const Mycomponent = function(){ this.data = this.data...(); } Mycomponent.prototype.data = function(){ return { a: 1, b: 2 } } 这样每一个实例data属性都是独立...这是js本身特性带来,跟vue本身设计无关。

99910
  • React报错之Expected an assignment or function call

    mapStateToProps函数问题一样,我们忘记从函数返回值。 显式返回 为了解决该错误,我们必须显式地使用return语句或使用箭头函数隐式返回值。...这是必须,因为Array.map方法返回一个数组,其中包含我们传递给它回调函数返回所有值。 需要注意,当你从一个嵌套函数返回时,你并没有同时从外层函数返回。...隐式返回 另一种方法使用箭头函数隐式返回。...需要注意,我们根本没有使用大括号。简短隐式返回使用圆括号。 返回对象 如果我们使用隐式返回返回一个对象,我们必须用圆括号来包裹这个对象。...但当你用圆括号包裹住大括号时,你就有一个隐式箭头函数返回。 如果你认为eslint规则不应该在你方案中造成错误,你可以通过使用注释来关闭某一行eslint规则。

    1.5K10

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

    所以,middleware 函数签名({ getState,dispatch })=> next => action。什么 Reactrefs?为什么它们很重要?...React Hooks 限制主要有两条:不要在循环、条件或嵌套函数中调用 Hook;在 React 函数组件中调用 Hook。那为什么会有这样限制呢?...那为什么不要在循环、条件或嵌套函数中调用 Hook 呢?因为 Hooks 设计基于数组实现。在调用时按顺序加入数组中,如果使用循环、条件或嵌套函数很有可能导致数组取值错位,执行错误 Hook。...当然,实质上 React 源码里不是数组,链表。这些限制会在编码上造成一定程度心智负担,新手可能会写错,为了避免这样情况,可以引入 ESLint Hooks 检查插件进行预防。...方法更新state,就会触发视图重新渲染,完成表单组件更新受控组件缺陷: 表单元素值都是由React组件进行管理,当多个输入框,或者多个这种组件时,如果想同时获取到全部值就必须每个都要编写事件处理函数

    1.8K10

    Redux with Hooks

    按照官网介绍,Hooks带来好处很多,其中让我感受最深主要有这几点: 函数式组件相比class组件通常可以精简不少代码。 没有生命周期束缚后,一些相互关联逻辑不用被强行分割。...实际上,如果我们遵循React官方建议,给项目装上eslint-plugin-react-hooks的话,这种写法就会收到eslint告警。所以从代码质量角度考虑,尽量不要偷懒采用这种写法。...其返回值会作为useSelector返回值,但与mapStateToProps不同,前者可以返回任何类型值(而不止一个对象),此外没有第二个参数ownProps(因为可以在组件内通过闭包拿到)...两者用法相近,但如果你想后者像前者一样返回一个对象的话要特别注意: 由于useSelector内部默认使用===来判断前后两次selector函数计算结果是否相同(如果不相同就会触发组件re-render...),那么如果selector函数返回对象,那实际上每次useSelector执行时调用它都会产生一个新对象,这就会造成组件无意义re-render。

    3.3K60

    react脚手架改造(reactreact-routerreduxeslintkaramimmutablees6webpackRedux DevTools)

    , mapDispatchToProps)(IndexTemplate)); }; export default Main; eslint改造 楼主用webstorm,所以首先开启eslint...而不是单调使用switch/case来进行匹配,中间运用到了扁平化reducers以及我之前在深入redux中间件一文中reduce函数。...middlewares.push(loggerMiddleware); 这样调整只要是在console控制台中日志打印,如果使用正常actions发起可以正常记录,但是类似如此代码记录不到...React-hot-loaderwranning警告 之前为3.0.0-beta.6版本,升级一下即可 npm install react-hot-loader@3.0.0-beta.7...放在一起,比如路由可以分模块化,比如每一个组件文件与样式文件可以放在一起(包括视图等等),再比如异步action统一配置middleware处理错误情况等等。

    1.7K50

    react高频面试题总结(一)

    React Hook 使用限制哪些?React Hooks 限制主要有两条:不要在循环、条件或嵌套函数中调用 Hook;在 React 函数组件中调用 Hook。那为什么会有这样限制呢?...那为什么不要在循环、条件或嵌套函数中调用 Hook 呢?因为 Hooks 设计基于数组实现。在调用时按顺序加入数组中,如果使用循环、条件或嵌套函数很有可能导致数组取值错位,执行错误 Hook。...当然,实质上 React 源码里不是数组,链表。这些限制会在编码上造成一定程度心智负担,新手可能会写错,为了避免这样情况,可以引入 ESLint Hooks 检查插件进行预防。...prevProps和prevState,表示之前属性和之前state,这个函数⼀个返回值,会作为第三个参数传给componentDidUpdate,如果你不想要返回值,可以返回null,此⽣命周期必须与...React Hooks在平时开发中需要注意问题和原因(1)不要在循环,条件或嵌套函数中调用Hook,必须始终在 React函数顶层使用Hook这是因为React需要利用调用顺序来正确更新相应状态,

    1.3K50

    React高频面试题合集(二)

    这是一个发生在渲染函数被调用和元素在屏幕上显示之间步骤,整个过程被称为调和。React中状态是什么?它是如何使用状态 React 组件核心,数据来源,必须尽可能简单。...为什么 useState 要使用数组而不是对象useState 用法:const [count, setCount] = useState(0)复制代码可以看到 useState 返回一个数组,那么为什么返回数组而不是返回对象呢...,那么使用者可以对数组中元素命名,代码看起来也比较干净如果 useState 返回对象,在解构对象时候必须要和 useState 内部实现返回对象同名,想要使用多次的话,必须得设置别名才能使用返回值下面来看看如果...那为什么不要在循环、条件或嵌套函数中调用 Hook 呢?因为 Hooks 设计基于数组实现。在调用时按顺序加入数组中,如果使用循环、条件或嵌套函数很有可能导致数组取值错位,执行错误 Hook。...props 不可修改,所有 React 组件都必须像纯函数一样保护它们 props 不被更改。state 在组件中创建,一般在 constructor中初始化 state。

    1.3K30

    DvaJS入门解析

    action 必须带有 type 属性指明具体行为,其它字段可以自定义,如果要发起一个 action 需要使用 dispatch 函数;需要注意 dispatch 在组件 connect Models... = (state: S, action: A) => S Reducer(也称为 reducing function)函数接受两个参数:之前已经累积运算结果和当前要被累积值,返回一个新累积结果...需要注意 Reducer 必须函数,所以同样输入必然得到同样输出,它们不应该产生任何副作用。...dva 为了控制副作用操作,底层引入了redux-sagas做异步流程控制,由于采用了generator相关概念,所以将异步转成同步写法,从而将effects转为纯函数。...至于为什么我们这么纠结于 纯函数,如果你想了解更多可以阅读Mostly adequate guide to FP,或者它中文译本JS函数式编程指南。

    73330

    react知识总结_六年级教学工作总结个人

    大家好,又见面了,我你们朋友全栈君。 简介 这次要总结对 store 和 reducer 拓展,比如发送异步 action 操作,还有一个就是对多个 reducer 管理。...-- ...这里可以写更多 reducer --> }) export { chatReducer }; 上面的 combineReducers 传入对象两个写法,但是每个写法最终呈现名字必须要与...-- 这时 state 返回一个对象,里面返回各个 reducer 返回 state --> userList: state.userList } } 还有一点就是 store 设置默认值问题...这种异步思路就是使用 Action Creator 返回一个函数,然后使用 redux-thunk 让 dispatch 能够接受一个函数作为参数。...); 上一种方法使用 Action Creator 返回函数来操作异步,使用 redux-promise 可以让它返回一个 promise 对象,可以使用 then 来实现后面的操作。

    65720

    React之redux学习日志(reduxreact-reduxredux-saga)

    使用纯函数执行修改:reducer中,应该返回一个纯函数函数接受先前 state和action, 然后返回一个新 state 3..../action-type' // 创建一个默认仓库,一般提出来会更加清晰 const defaultState = { userInfo: {} } // reducer必须一个纯函数 const...redux-thunk 主要是使action能够返回一个函数而达到目的,这样导致了action函数变得复杂   redux-saga 可以将异步操作单独分离出来封装到某些模块,这样保证action函数更加干净...,就会执行 getUserInfoSaga 函数,这样就完成了异步拓展。   ...备注:redux-saga函数必须一个Generator函数 拓展:还可以通过以下代码来将saga进行模块化: import { all, fork } from 'redux-saga/effects

    54830

    一文入门react全家桶

    4.数据都需要通过ajax请求获取, 并在前端异步展现。 5.1.2. 路由理解 1.什么路由?...使用redux编写应用 效果 7.5. redux异步编程 7.5.1理解: 1.redux默认不能进行异步处理, 2.某些时候应用中需要在redux中执行异步任务(ajax, 定时器) 7.5.2...纯函数 1.一类特别的函数: 只要是同样输入(实参),必定得到同样输出(返回) 2.必须遵守以下一些约束 1)不得改写参数数据 2)不会产生任何副作用,例如网络请求,输入和输出设备 3)不能调用Date.now...()或者Math.random()等不纯方法 3.reduxreducer函数必须一个纯函数 7.8.2....高阶函数 1.理解: 一类特别的函数 1)情况1: 参数函数 2)情况2: 返回函数 2.常见高阶函数: 1)定时器设置函数 2)数组forEach()/map()/filter()/reduce

    3.4K20

    Flux --> Redux --> Redux React 基础实例教程

    开始用Redux 上面讲了那么多字,还是看代码来得实在 这里先纯粹讲Redux,毕竟它和React没啥关系 首先是环境配置,基本上都会使用ES6,所以Babel支持必须 然后Redux支持... 中第一个参数为一个对象,表示store中整体state数据 当然,第一个参数也可以为函数,也可以接收第二个参数,表示自身拥有的属性(ownProps),具体可以看API 最后它返回了一个新对象,表示要传给...store中值是否改变,改变才调用,否则不调用 areStatesEqual: 函数,当pure为true时调用这个函数检测是否相等,返回true|false表示是否相等,默认以严格相等===来判断前后值是否相等...4.7.8 在React-Redux中使用异步 因Redux中操作执行同步,如果要实现异步,比如某个操作用来发个异步请求获取数据,就得引入中间件来处理这种特殊操作 即这个操作不再普通值,而是一个函数...一个函数(这个调用返回还是一个函数),而Redux默认只支持对象格式action,所以这样会报错 这里fetchIncreaseValue看起来像这样 function fetchIncreaseValue

    3.7K20

    字节前端二面react面试题(边面边更)_2023-03-13

    需要注意,如果props传入内容不需要影响到你state,那么就需要返回一个null,这个返回必须,所以尽量将其写到函数末尾:static getDerivedStateFromProps...注意:constructor () 必须配上 super(), 如果要在constructor 内部使用 this.props 就要 传入props , 否则不用JavaScript中 bind 每次都会返回一个新函数...一些库如 React 视图在视图层禁止异步和直接操作 DOM来解决这个问题。美中不足,React 依旧把处理 state 中数据问题留给了你。Redux就是为了帮你解决这个问题。...为什么?被废弃三个函数都是在render之前,因为fber出现,很可能因为高优先级任务出现而打断现有任务导致它们会被执行多次。...//(这里 snapshot getSnapshotBeforeUpdate 返回值) if (snapshot !

    1.8K10

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券