在vscode编辑器中使用react-redux @connect发生报错的问题解决

最新推荐文章于 2024-06-13 14:57:34 发布
最新推荐文章于 2024-06-13 14:57:34 发布
阅读量2.8k 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26586219/article/details/85991776
版权
在学习Redux+React Router+Node.js全栈开发时，遇到使用react-redux的@connect装饰器报错。错误信息指出需要提供'decoratorsBeforeExport'选项。原因在于项目使用了Babel 7.x，而当前配置适配的是Babel 6。解决方案是按照npm官网指示，安装@babel/plugin-proposal-decorators，并更新package.json配置。若vscode仍有错误提示，需创建jsconfig.json文件。
摘要由CSDN通过智能技术生成

在慕课网Redux+React Router+Node.js全栈开发的学习中我遇到了一个问题

当使用react-redux的@connet装饰器时发生了报错，为什么编辑的和学习视频中相同，但会报错，而且运行后也产生了error。

当时我的package.json中用的是“transform-decorators-leagacy”这个插件，在项目中安装的是"babel-plugin-transform-decorators-legacy": "^1.3.5"，

"plugins": [
      "transform-decorators-legacy",
      [
        "import",
        {
          "libraryName": "antd-mobile",
          "style": "css"
        }
      ]
    ]

产生了错误：Error: The 'decorators' plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. If you are migrating from Babylon/Babel 6 or want to use the old decorators proposal, you should use the 'decorators-legacy' plugin instead of 'decorators'.

这是因为上面的配置是使用babel6时的配置，

最低0.47元/天 解锁文章
zz佳炜
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vscode-redux-devtools:Redux DevTools vscode扩展
05-06
VSCode的Redux DevTools Visual Studio Code扩展，可将Redux Devtools集成到编辑器中。 特征 检查您的应用程序的redux存储。 就像您可能在Chrome中使用的那样。 快速开始 安装扩展 CMD + Shift + P打开命令面板，然后键入Redux Devtools ，选择命令“ Open Devtool to the Side 。 在devtool面板中，单击设置以设置您的remotedev服务器的侦听端口和主机。 可选，如果您没有正在运行的remotedev服务器，则需要启动一个。 （查找文档或查看我们的） 此外，您还需要将远程redux devtool中间件组合到您的redux存储中： import { createStore , applyMiddleware } from 'redux' import { compos
VSC-React-Native-React-Redux-Snippets：用于React和React-Native的代码片段，以及用于es6es7用户的Redux
02-05
只需在市场中搜索"VSC-React-Native-React-Redux-Snippets"，安装完成后，在编辑器内输入预设的触发词，按下Tab键，即可自动补全相应的代码块。这种方式不仅可以减少重复的键盘敲击，还能降低出错的概率，提升编码...
react-redux使用connect和forwardRef报错
weixin_50760181的博客
05-09 389
【代码】react-redux使用connect和forwardRef报错。
【React】vscode 设置提示 @ 路径 和 ~@ 路径 一直不成功的解决办法
最新发布
weixin_40874076的博客
06-13 606
菜鸟最近用公司的电脑开发，结果发现之前有的路径提示全没了，感觉非常难受，然后去插件一看才发现，好像是菜鸟自己不小心把这个插件给删了。1、== 首先需要下载上面的插件==
react-redux的connect装饰器报错？
Winyaz的博客
02-01 2854
react-redux的装饰器@connect中的@字符串报错， 解决方法，package.json的babel中忘记声明了plugins
react @connect
sf1989424的博客
11-20 4322
import React from 'react'; import { connect } from 'react-redux' import {add_A,rem_R,addAsync} from './index.redux.js' /**没使用@conncet注解方式之前的实现 * 接收store赋值给组件内部的props * const mapStatetoProps = (st...
connect装饰器报错的问题，需要babel插件，以及引入失效的问题
qq_39047764的博客
07-06 1553
cnpm i --save-dev babel-plugin-transform-decorators-legacy"babel": {    "plugins": [      "transform-decorators-legacy"    ]  }               还不够；必须在babelrc里面再引入一次才行...
React-Redux-Articles:使用React和Redux的简单文章收集器
05-18
在React组件中，我们可以使用`connect()`函数（来自React-Redux库）将组件与Redux store连接起来。`connect()`接受两个参数：`mapStateToProps`和`mapDispatchToProps`。前者用于将store中的部分状态映射到组件的...
react-redux-tutorial：react-redux-tutorial中文，目录和代码示例
02-19
Redux则解决了在大型React应用中管理状态的复杂性。在Redux中，应用的状态被集中存储在一个单一的store对象中，所有的状态改变都必须通过dispatching actions来完成，这些actions是描述发生了什么的简单对象。然后，...
react-redux-crud-todos：使用CodeSandbox创建
02-08
在本项目"react-redux-crud-todos"中，我们看到的是一个使用ReactJS和react-redux库实现的简单CRUD（创建、读取、更新、删除）应用。这个项目是在CodeSandbox平台上创建的，它是一个在线的代码编辑器，特别适合开发...
react-使用React和Redux制作的日历支持提醒和不同的月份
08-15
在本文中，我们将深入探讨如何使用React和Redux构建一个功能丰富的日历应用，该应用支持提醒功能以及切换不同月份。React是Facebook推出的一款用于构建用户界面的JavaScript库，而Redux则是一个可预测的状态容器，常...
【问题记录】React使用connect后，ref.current为null
草率小猿的博客
11-04 4100
在用React开发项目的过程中，遇到一个问题，使用connect连接子组件后，父组件调用子组件方法时，提示xxxRef.current为null的错误。
react跨组件通信及react-redux 使用
ngd-b的博客
05-05 947
react 组件间数据共享； context 使用 redux 使用 react-redux 使用
vscode中一键生成react代码块以及快速补全react代码
fxg163的专栏
08-07 472
1.vscode扩展搜索ES7 React/Redux/GraphQL/React-Native snippetsd或者React-Native/React/Redux snippets for es6/es7 并安装(如果安装后者 直接cccs可以一键生成模板块 安装前者 步骤如下) 2. 安装后rcc回车即可生成有状态组件 3.rfc回车 生成无状态组件 4.快速补全react代码 ...
redux react-redux使用 connect安装及配置
qq_36262295的博客
02-05 184
redux需要安装 以下依赖： cnpm install redux --save cnpm install react-redux --save cnpm install redux-actions --save @connect装饰器报错处理 因为用到了es6/7的语法，需要安装babel转码 npm run eject //解除封装 cnpm install babel-plugin-transform-decorators-legacy --save-dev cnpm install
深入浅出之React-redux中connect的装饰器用法@connect
weixin_34406086的博客
12-18 416
这篇文章主要介绍了react-redux中connect的装饰器用法@connect详解,写的十分的全面细致，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。 通常我们需要一个reducer和一个action，然后使用connect来包裹你的Component。假设你已经有一个key为main的reduc...
Redux 错误处理
GoldenaArcher的博客
10-15 188
这两天正好收尾一个 Redux 页面的重构，碰到了一些错误处理的方式，这里就写个笔记总结一下碰到的问题和几种处理方式大体上是分为同步函数和异步函数两个方面去处理。
react项目建立中的问题
管他熙熙攘攘阳关道，我偏要一条独木桥走到黑
10-12 211
webpack设置自动打开浏览器 1、运行命令安装插件： npm install open-browser-webpack-plugin --sava-dev 2、在webpack.config.js文件中： var OpenBrowserPlugin = require('open-browser-webpack-plugin'); plugins: [ new OpenBrowserPlugin({ url: 'http://localhost:xxxx' }), ...
【React】如何用优雅的方法写connect？
不忘初心，坚定道路！
04-24 687
前言 我在使用taro脚手架时，选择react+redux+ts模板时，会拉到一个写着装饰器connect的模板，事实上用该模板在那页会看到@connect那里完全报错，并没有很好的解决这个问题，那么如何优雅的写connect呢？对此我查阅了些资料。 万能ANY 我们先讨论如何才能不报错，最简单的写法当然是利用any了。 方案1 装饰器后使用any解决： @(connect(mapStateToProps,mapDispatchToProps) as any) 方案2 利用require进来
npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: react-redux@8.0.5 npm ERR! Found: redux@3.7.2 npm ERR! node_modules/redux npm ERR! redux@"^3.7.2" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peerOptional redux@"^4" from react-redux@8.0.5 npm ERR! node_modules/react-redux npm ERR! react-redux@"*" from the root project npm ERR! npm ERR! Conflicting peer dependency: redux@4.2.1 npm ERR! node_modules/redux npm ERR! peerOptional redux@"^4" from react-redux@8.0.5 npm ERR! node_modules/react-redux npm ERR! react-redux@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\lenovo\AppData\Local\npm-cache\eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\lenovo\AppData\Local\npm-cache\_logs\2023-05-23T12_01_39_491Z-debug-0.log
05-24
这个错误提示是因为 react-redux 的版本要求依赖于 redux 的 ^4 版本，而你的项目中安装的 redux 版本是 ^3.7.2，所以会出现版本冲突的问题。可以尝试以下几种解决方法： 1.升级 redux 的版本到^4：在项目根目录下运行以下命令： ```npm install redux@^4``` 2.降低 react-redux 的版本：在项目根目录下运行以下命令： ```npm install react-redux@7.2.5``` 3.使用--force或--legacy-peer-deps选项强制安装依赖项：在项目根目录下运行以下命令： ```npm install --force``` 或者 ```npm install --legacy-peer-deps```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值