首页
学习
活动
专区
工具
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本身设计无关。

1K10
  • React报错之Expected an assignment or function call

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

    1.6K10

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

    所以,middleware 的函数签名是({ getState,dispatch })=> next => action。什么是 React的refs?为什么它们很重要?...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-loader的wranning警告 之前为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.4K50

    React高频面试题合集(二)

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

    1.3K30

    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 来实现后面的操作。

    66520

    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函数式编程指南。

    77530

    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

    55830

    一文入门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.redux的reducer函数必须是一个纯函数 7.8.2....高阶函数 1.理解: 一类特别的函数 1)情况1: 参数是函数 2)情况2: 返回是函数 2.常见的高阶函数: 1)定时器设置函数 2)数组的forEach()/map()/filter()/reduce

    3.4K20

    字节前端二面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

    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.8K20

    【技术圈】ESLint v7.0.0 将会有哪些新功能?

    CLIEngine 类为 ESLint 提供支持,多年来一直是该项目的重要组成部分。 不幸的是, CLIEngine 已经成为许多新特性的主要阻碍。...最重要的是,因为CLIEngine 类是同步工作的,所以在 ESLint 的核心中不可能执行任何类型的异步操作。...ESLint 类将包含异步方法,作为将异步功能引入核心的起点。最开始, ESLint 类只是对 CLIEngine 的一个封装,随着时间的推移,我们将系统地开始在 ESLint 类中编写新功能。...指令注释中的描述 指令注释描述允许你给自己和其他开发人员留下关于为什么要包含注释的说明。...自动修复程序规则必须测试其修复程序的输出。 现在测试代码存在语法错误的地方将失败。 如果测试规范包含未知属性,则测试失败。

    1.5K30

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券