react筛选器eslint错误:箭头正文周围的意外块语句
React筛选器eslint错误:箭头正文周围的意外块语句是指在React开发中使用筛选器时，使用箭头函数时出现的eslint错误，错误提示为箭头函数周围有意外的块语句。
箭头函数是ES6中引入的一种简化函数定义的语法，它可以更简洁地定义函数，并且自动绑定了函数体内的this值。在React中，箭头函数常用于定义组件的方法。
然而，当在箭头函数中使用筛选器时，有时会出现eslint错误，提示箭头函数周围有意外的块语句。这是因为在箭头函数中，如果函数体只有一行代码，可以省略花括号{}，直接写代码。但是如果在箭头函数中使用筛选器时，筛选器的语法需要使用花括号{}，这就导致了eslint错误的出现。
解决这个错误的方法是，在箭头函数中使用筛选器时，将筛选器的语句用圆括号()包裹起来，这样就可以避免eslint错误的出现。例如：
const filteredData = data.filter((item) => (
item.property === value
));在上述代码中，使用圆括号将筛选器的语句包裹起来，避免了eslint错误的出现。
推荐的腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：提供可扩展的计算能力，满足各种业务需求。产品介绍链接
- 云数据库MySQL版（CDB）：高性能、可扩展的关系型数据库服务。产品介绍链接
- 云存储（COS）：安全可靠的对象存储服务，适用于存储和处理各种类型的文件。产品介绍链接
- 人工智能机器翻译（TMT）：提供高质量、多语种的机器翻译服务。产品介绍链接
- 物联网开发平台（IoT Explorer）：提供全面的物联网解决方案，帮助用户快速构建物联网应用。产品介绍链接
以上是腾讯云提供的一些相关产品，可以根据具体需求选择适合的产品来支持React开发中的筛选器功能。
相关·内容
我在React应用程序中使用以下包生成Recaptcha组件：
下面是组件的样子，并附带了eslint警告：
this.recaptchaRef的定义如下：this.recaptchaRef = React.createRef();
当我的表单出现错误时，这个引用允许我重置Recaptcha，如：this.recaptchaRef.reset();
在不编写ESlint注释的情况下，如何解决此错误？
浏览 0提问于2018-07-02得票数 1
回答已采纳
2回答
为什么这段代码会给我警告呢？解决办法是什么？任何帮助都将不胜感激。
const configureStore = () => {
return createStore(
rootReducer,
middleware
);
};
这是我的埃林特配置
{
"parser": "babel-eslint",
"extends": "airbnb",
"plugins": [
"react"
],
"rules": {
浏览 1提问于2016-08-13得票数 2
回答已采纳
你好，我有下面的缩进错误：
期望有4个空格的缩进，但发现6.eslint(@typescript-eslint/缩进)
我已经尝试了所有的方法，但找不到任何解决方案，eslint指出要执行以下操作：
“缩进”：“关闭”，
“@typescript-eslint/缩进”：“错误”，
但不起作用
.eslintrc：
// .eslintrc
{
"plugins": ["prettier", "@typescript-eslint"],
"extends": ["airbnb-typescript", &
浏览 1提问于2020-05-03得票数 4
回答已采纳
我已经设置了eslint & eslint-plugin-react。
当我运行ESLint时，链接器为每个React组件返回no-unused vars错误。
我假设它没有意识到我使用的是JSX或React语法。有什么想法吗？
这是我的代码
浏览 47提问于2018-09-09得票数 0
2回答
分析错误:意外的标记常量
、、、、
我目前正在设置一个流星应用程序，我正在使用eslint和babel，但我得到以下代码片段的以下错误：
const Navigation = props => (
const classes = props.classes;
return (
<div className={classes.root}>
</div>
)
);
错误：
2:4 - Parsing error: Unexpected token const
我已经重新创建了我的eslint配置。我的.babelrc配置如下：
{
"presets":
浏览 0提问于2017-09-18得票数 5
回答已采纳
当使用命名函数而不是箭头函数时，在用typescript编写的React组件中使用children关键字传递子节点的正确方法是什么？
在箭头函数中，我可以编写类似这样的代码：
const MyComponent: React.FC = ({children}) => {
return <div>{children}</div>
}
export default MyComponent;
但是如何使用normal函数来做同样的事情呢？我试过了
import React from "react";
function MyComponent({
浏览 21提问于2021-03-16得票数 0
回答已采纳
在使用eslint和typescript的React项目中发生了一个styled-component错误。
错误
ESLint: 4个空格的预期缩进，但发现6.(缩进)
来源
const InputField = styled.input<{ error?: boolean }>`
...
&:focus {
outline: none;
border-color: ${({ theme, error }) =>
error ? theme.color.error : '#0d58ee'};
}
`;
浏览 14提问于2022-09-13得票数 0
对我来说，我不知道为什么我的react应用程序不能工作。我的输入状态get在onSubmit之后呈现。但是我的值不会在我的输入栏中消失。我的列表上什么都没有呈现。我只有在将组件分解成更小的块后才遇到这个问题，当它是一个完整的组件时，我可以毫不费力地工作。
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
input: '',
items: []
}
this.handleChange = this
浏览 9提问于2018-09-02得票数 1
2回答
Bash将箭头指向"else“，并用挑衅的牢骚语气说”语法错误“。
awk '{if($3 != 0) a = ($3/$4) print $0, a; else if($3==0) print $0, "-" }' file > out
为什么？
浏览 2提问于2012-05-24得票数 29
我知道() => {}不需要返回，但是如果它不在那里，那么Eslint就会抱怨未使用的表达式。
export const isInInterval = (from, to, target) => {
if (isNaN(Date.parse(to)) && isNaN(Date.parse(from)) === true) {
return
}
const toUnixTimestamp = time => new Date(time).getTime()
toUnixTimestamp(to) - target > toUnix
浏览 0提问于2018-08-15得票数 3
1回答
在React应用程序中尝试解决Eslint问题
Object.keys(selected).map(function (key, val) {
if (selected[key]) {
selectedItem.push(val)
selectedItem.push(key)
}
});
这是一个现有的代码，不确定我是否应该更改为forEach来解决这个Eslint错误，尝试将{}===============>箭头替换为()
请提出解决这个Eslint错误的方法。
浏览 2提问于2021-12-23得票数 0
为什么ESLint要拒绝这个？
let myFunc = (state) => {a:"b"};
它是说，它期望一个函数或任务调用。
浏览 0提问于2018-12-11得票数 2
回答已采纳
在使用Failed to load all assets命令运行时，获取生产环境上的expo start --no-dev -c错误。这个错误发生在iOS和Android上。尝试清除npm缓存，城域绑定缓存。还是没有运气。无法从论坛或世博会的不和谐社区找到有效的解决方案。任何想法/帮助都是最受欢迎的。
package.json如下所示
"dependencies": {
"@react-native-async-storage/async-storage": "~1.17.3",
"@react-native-c
浏览 18提问于2022-07-26得票数 3
编译Unexpected block statement surrounding arrow body; move the returned value immediately after the =>失败了
文件：
{
this.state.items.map((item) => {
return (
<div key={item}>
<a href={item.mainContact.phoneHref + item.mainContact.phone}>
浏览 3提问于2018-10-03得票数 36
回答已采纳
第11行:期望一个赋值或函数调用，然后看到一个表达式
这是我每次运行时都会遇到的错误
npm启动
在我的React应用程序中，我正在编写。细胞质雄性不育的GraphCMS。一切都很好，除了当我试图映射帖子时，它会产生这个错误。
我怀疑这个问题可能与JSHint有关，但我不知道如何解决这个问题。
这是我的代码：
import React from 'react';
import { Link } from 'react-router-dom';
import { graphql} from 'react-apollo';
imp
浏览 0提问于2018-12-07得票数 2
回答已采纳
我有以下几点：
import React from 'react';
import PropTypes from 'prop-types';
const Foo = (props) => {
const myFunc = () => (
<div>
{ props.bar }
</div>
);
return myFunc();
};
Foo.propTypes = {
bar: PropTypes.string.isRequired,
};
export default F
浏览 3提问于2017-08-18得票数 4
回答已采纳
我使用Power (PAC)创建了一个Power组件框架(PCF)项目。我使用了以下命令：
// initializes directory with a new PCF project
pac pcf init
// installs the project dependencies
npm install
使用这个基本的项目代码，当我在VisualStudio2019中打开项目文件夹时，它会显示index.ts (TypeScript)文件中的多个TypeScript错误。但是，相同的代码在Visual 2017中没有显示错误。
和VS的两个版本都启用了ESLint (Tool
浏览 2提问于2021-06-07得票数 0
2回答
我正在尝试在我的类中添加@DragDropContext装饰器，但是当我在浏览器中加载它时，我会收到一个错误。
我的组件看起来像：
import React from 'react';
import Link from 'react-router-dom';
import { connect } from 'react-redux';
import { DragDropContext } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-back
浏览 1提问于2018-02-14得票数 1
回答已采纳
3回答
我在react中遇到了一些eslint的问题。它要求我使用解构属性赋值，但当我更改代码时，它就会崩溃。
有什么想法吗？
这是完整的代码
class LoginPage extends React.Component {
submit = data =>
// This is how I tried to fix it!
// {
// const { login, history } = this.props;
// login(data).then(() => history.push('/'));
// };
浏览 2提问于2018-08-29得票数 2
1回答
嗨，在结束括号之前，我正在试图为空行找到一条简洁的规则:我使用的是react，下面是示例：
const test = () => (
<div>
Hello
</div>
// This should show an error
)
eslint : package.json
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.14.0",
浏览 1提问于2018-10-15得票数 4
我正在开发一个React应用程序，并试图禁用类组件方法ESLint react/no-unsafe的UNSAFE_componentWillUpdate。但是，在类组件定义的主体中，以下内容似乎不起作用：
/* eslint-disable react/no-unsafe, camelcase */
UNSAFE_componentWillUpdate() {
....
}
/* eslint-enable react/no-unsafe, camelcase */
或者：
// eslint-disable-next-line reac
浏览 6提问于2022-04-22得票数 1
回答已采纳
在我的React应用中，我使用的是airbnb的eslint风格指南，如果我不使用destructuing，它会抛出一个错误。
在下面的情况中，我首先使用let将两个变量latitude和longitude赋给location对象数组中第一个项目的坐标。然后，如果用户允许我访问它们的位置，我会尝试使用解构来重新分配它们的值。
let latitude = locations[0].coordinates[1];
let longitude = locations[0].coordinates[0];
if (props.userLocation.coords) {
// doesn
浏览 0提问于2018-02-10得票数 102
回答已采纳
问题说明：
我已经开始用和做一个项目。问题是，eslint给了我一个意外的错误，似乎是一个正确声明的函数。
代码：
import React, { useState } from 'react';
type Props = {
options: Array<string>
};
const Switch: React.FC<Props> = (props: Props) => {
const [choice, setChoice] = useState<number>(0);
// eslint gives erro
浏览 0提问于2019-12-22得票数 0
回答已采纳
我在设置酶/jest时遇到了问题。
看起来我的配置里少了点什么。我使用create-react-app创建了这个项目，后来我安装了enzyme。如果我使用选择器测试小的组件，比如类名，它会工作得很好。但是当我想为我的组件添加一个测试时，我遇到了这个错误。我发现人们遇到了这个问题，但到目前为止还没有有效的解决方案。
我在这里粘贴了所有的细节，如果有人遇到这个问题，你是如何解决它的？
错误信息为：
FAIL src/__tests__/components/App.js
● Test suite failed to run
Invariant Violation: Target
浏览 1提问于2018-08-09得票数 1
回答已采纳
1回答
我是移动我的反应应用程序到码头，我正在工作的遗留项目，我们有多个反应应用。我们是附加在每个需要使用这些文件的页面上的脚本标记中使用react应用程序的脚本。对于码头，我们想使用特快服务我们的文件。有办法运行多个监视命令吗？
这是我的package.json文件：
{
"name": "docker apps",
"version": "3.0.0",
"description": "apps",
"license": "ISC",
"aut
浏览 1提问于2022-02-07得票数 0
回答已采纳
我有一个导出文件，其中包含以下名为index.js的文件。
export Main from './Main/Main'
但是，eslint不喜欢这样，并抛出错误
Parsing error: Unexpected token Main
我不确定为什么，因为应用程序工作正常，我相信这是有效的语法。
我的.eslintrc文件如下所示
{
env: {
es6: true,
browser: true
},
parserOptions: {
ecmaVersion: 6,
sourceType: "module",
浏览 0提问于2016-03-26得票数 12
回答已采纳
当我在我的项目中运行时，我正在做Ant design react，然后在浏览器中，它显示错误，就像这个围绕箭头主体的意外块语句；将返回值立即移动到=>箭头主体样式之后。我不能理解如何解决这个错误 这是我的代码App.js /* eslint-disable eol-last */
import React from "react";
import "antd/dist/antd.css";
import { Row, Col } from "antd";
import "./Walkin.css";
const Wa
浏览 40提问于2021-06-29得票数 0
回答已采纳
我的项目没有使用创建-反应-应用程序。我在提升我的埃斯林特。如何向eslintrc.js文件添加正确的响应？
目前，我在extend属性中有以下内容：
extends: [
'airbnb',
'airbnb-typescript',
'airbnb/hooks',
// "plugin:@typescript-eslint/recommended",
// "plugin:@typescript-eslint/recommended-requiring-type-checking&
浏览 16提问于2022-07-04得票数 0
我已经关注了.eslintrc
{
"extends": "standard"
}
我的javascript文件中有以下代码
import React from 'react';
根据eslint，上面的代码行是错误的。它给出了以下抱怨。
"; Extra semicolon
如何在eslint中使用分号？
浏览 0提问于2016-11-07得票数 72
由于我在create app项目中重新安装了NPM依赖项，Atom的eslint在每个文件的顶部给出了这个错误：
Error while running ESLint: Cannot find module 'eslint-config-react-app'.
虽然react-scripts的eslint不会引起任何警告或错误。顺便说一句，eslint-config-react-app 包是安装在node_modules中的。我尝试重新安装linter、atom、NPM依赖项等等。
有什么主意吗？
这是我的.eslintrc：
{
"extends": &#
浏览 4提问于2019-11-03得票数 6
2回答
嗨，我使用名为lint-eslint的Atom和plugin来分析我的javascript代码，它确实工作得很好，但是我的gulpfile.js上有一个非常恼人的linting错误。
下面是触发链接错误的代码，我使用airbnb .eslintrc配置文件作为ESlinter。
gulp.task('lint', () => {
return gulp.src(['**/*.js', '!node_modules/**', '!src/**'])
.pipe(gulpif(args.verbose, gprint()))
浏览 0提问于2016-06-03得票数 2
回答已采纳
在使用ESLint插件的react组件中，我遇到了一些eslint-plugin-react和箭头函数的问题。我只是做了这些命令：
npm i -g eslint eslint-plugin-react
eslint SignUpPage.jsx
下面是SignUpPage：
/**
* Created by jwilso37 on 4/5/2017.
*/
import React from 'react';
import SignUpForm from '../components/landing/SignUpForm.jsx';
im
浏览 2提问于2017-04-17得票数 0
我想要指定哪些文件要在我的eslintrc.js中链接，所以我添加了文件：.
module.exports = {
extends: [
'react-app',
'react-app/jest',
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'prettier',
],
files: ['*.ts', '*.jsx', '*.ts',
浏览 14提问于2022-07-28得票数 0
我试图建立一个反应项目，使用webpack和ESLint与airbnb配置为ESLint。当我尝试使用webpack dev服务器启动该项目时，会出现以下错误：
模块构建失败:错误: /react-template/node_modules/eslint-config-airbnb/rules/react-a11y.js: ESLint配置无效：-意外的顶级属性“ecmaFeatures”。
这是使用airbnb诉15.0.1。我检查了react a11y.js文件，并确认有一个顶级属性"ecmaFeatures“。我知道在ESLint 2.0.0中，ecmaFeatures现
浏览 10提问于2017-06-13得票数 12
回答已采纳
2回答
有人能向我解释一下，为什么这是我尝试过的唯一一个版本，可以用es6复制状态并添加另一个字段，而不是下面列出的其他尝试方式？
const values = [{key: "1", val: "one"}, {key: "2", val: "two"}];
var works = values.map(v => {
return {
...v,
extra: "stuff"
}
})
所有这些都会产生这些错误：
//Unexpected token '...&#
浏览 18提问于2022-02-12得票数 1
4回答
我有一个名为items的对象列表。我想将列表中的每个对象放到表中的一行。但是，没有呈现行。我用的是打字记录和反应引导。我想知道为什么会发生这种事，以及如何解决。谢谢!
Template.tsx
export default function Templates() {
const items = [
{
"name": "Item 1",
"alt": "First",
"description": "This is the
浏览 5提问于2020-06-19得票数 2
回答已采纳
使用带有React配置的eslint，我在使用时得到了一个错误。错误说：
避免使用Object.defineProperty，而使用Reflect.defineProperty。(更喜欢-反映)
在eslint 上，他们说这是不可取的，原因是：
这条规则的初衷现在似乎被误导了，因为我们已经理解到，Reflect方法实际上并不打算取代规则所建议的Object对应方，而是以低级原语的形式存在，以便与代理一起使用，以便复制以前存在的各种功能的默认行为。
那么我的问题是:使用Reflect.defineProperty而不是Object.defineProperty有什么好处吗？
浏览 2提问于2018-03-03得票数 5
回答已采纳
1回答
假设我们有一个使用如下ES6语法的函数：
const AccountOverview = (props) => {
const overviewVisible = props.overviewVisible;
const accountNumber = props.accountNumber;
const toggleAccountOverview = props.toggleAccountOverview;
const onClick = (e) => {
e.preventDefault();
toggleAccountOverview(!ov
浏览 0提问于2017-09-12得票数 0
3回答
未定义not类方法
、、、
我是新来的。我的应用程序运行正常，但在添加了eslint(airbnb)之后，我的应用程序无法编译。
export default class HelloWorldComponent extends React.Component {
render() {
return (
<div>
<div>{this.props.message}</div>
<button onClick={this.props.helloWorldClick}>Hello
World</bu
浏览 3提问于2017-09-12得票数 5
我在使用map函数时，使用了一个if语句，该语句不以“否则”结尾。我必须严格要求只显示定义的recourseTypes。
在eslint中，我在我的=>上出现了一个错误，因为它不会以其他错误结尾。
Array.prototype.map()期望在箭头函数的末尾返回一个值。
有正确的方法来写这个吗？
代码：
routes: async () => {
const apiURL = process.env.BASE_URL
const response = await axios.get(`${apiURL}/urls`)
const {
浏览 5提问于2022-06-20得票数 0
回答已采纳
我有以下类型脚本代码：-
export default class SingleNews extends React.Component<INews, {}> {
public render(): React.ReactElement<INews> {
return (
<>
{this.props.featured
? this.props.recentNews.map(post => (
浏览 1提问于2021-11-26得票数 0
回答已采纳
我整个上午都在为这个问题苦苦挣扎，在任何地方都找不到解决方案。我刚开始使用typescript，我正在尝试用Eslint和更漂亮的工具正确地设置它，以确保代码格式正确。
所以，我在创建功能组件时所面临的问题。根据小抄，我正在尝试导出一个简单的组件，例如：
import React from "react";
type DivProps = {
text: string;
};
const Div = ({ text }: DivProps): JSX.Element => (<div>{text}</div>)
export defaul
浏览 7提问于2021-11-11得票数 23
回答已采纳
在我的react jsx文件中，我在一个Table中包含了以下代码 render() {
return(
<Table>
<thead>
<tr>
{
this.collection.arraylist.map((name) => {
return this.getMoreNames(name)
}
}
</tr>
</thead>
<Table>
)}
esLint is give me the error as
浏览 22提问于2020-01-24得票数 1
我对配置更漂亮和eslint有问题。示例函数： const foo = () => {
[1, 2, 3].forEach((element) => {
console.log(element);
});
}; 当我保存时，从元素中删除了圆括号，并收到一个错误：“箭头函数参数周围有一个带大括号的主体。(eslintarrow-parens)。”此问题仅在TypeScript文件中出现。在JavaScript中，括号不会被删除。隐式箭头换行和操作符换行规则也会出现同样的问题。怎样才能让它在TypeScript中工作？ vscode settings.json：
浏览 52提问于2021-04-20得票数 0
我只能使用诸如map和foreach之类的迭代器的简写语法，并且我在网上找不到任何关于我遇到的这个难题的答案。我在reactjs工作了两天，所以请耐心等待。这是我正在学习的Udemy课程的一部分。
我遇到了一个问题，通过使用速记运算符，没有出现错误。这显然与渲染组件时的作用域有关？这就是我特别提到的带有Options组件的Map函数
有错误的原始代码
class IndecisionApp extends React.Component {
render() {
const title = 'Indecision';
const subtitle
浏览 0提问于2019-08-20得票数 2
在运行npm test时，我得到了以下错误：
Cannot find module 'react-dom/client' from 'node_modules/@testing-library/react/dist/pure.js'
Required stack:
node_modules/@testing-library/react/dist/pure.js
node_modules/@testing-library/react/dist/index.js
所有必要的软件包似乎都安装好了。我重新安装了react-dom，但没有帮助。下面提供在我的测试文件中使用
浏览 9提问于2022-04-01得票数 83
回答已采纳
我正在使用Angularfire (@转角/火)从Firestore获取数据，如下所示：
return this.afs.collection('payments', (ref) => {
return ref
.where('group', '==', group)
.orderBy('category', 'asc');
}).valueChanges();
当我使用ESLint检查我的代码时，我得到以下错误：
围绕箭头体的意外块语句；在=>箭头体样式之后立即移动返回的值
有办
浏览 1提问于2021-01-14得票数 0
我正在尝试在react中过滤一个数组。下面是我的代码：
resultArray = myArray.filter((item) => {
return item.children.length === 0;
});
这给了我一个eslint错误：Unexpected block statement surrounding arrow body
所以我把大括号换成了圆括号：
resultArray = myArray.filter((item) => (
return item.children.length === 0;
));
这使我在突出显示return时出现意外的令牌
浏览 38提问于2017-08-29得票数 0
回答已采纳
3回答
const Index = () => (
<div>
<p>Hello World</p>
<Link href="/posts">
<a>Posts</a>
</Link>
</div>
)
ESLint正在返回关闭的</p>标记的解析错误(意外令牌)。我遗漏了什么？在JSX中不允许使用普通HTML属性吗？( div似乎运转良好)
确切的错误是：
[eslint]
浏览 0提问于2018-10-30得票数 10
回答已采纳
我正在调用多个函数(带有承诺)将被返回。代码对我来说非常好，但是我需要ESlint无错误代码。现在我得到了下面的错误。
意料之外的块语句围绕箭头体箭头体样式
请你对此提出建议..。
this.test1 = function() {
return this.test2().then((val1) => {
return this.test3().then((val2) => {
return this.test4().then((values) => {
const nameValues = [];
fo
浏览 1提问于2017-09-11得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
