ReactJS -箭头函数中的Eslint - Method语法
ReactJS是一个用于构建用户界面的JavaScript库。它采用组件化的开发模式，使得开发者可以将界面拆分为独立的可复用组件，从而提高代码的可维护性和复用性。
箭头函数是ES6引入的一种新的函数定义方式。它具有更简洁的语法和更明确的this绑定规则。在ReactJS中，箭头函数常用于定义组件的方法。
Eslint是一个用于静态代码分析的工具，可以帮助开发者发现和修复代码中的潜在问题和错误。它支持通过配置文件定义代码规范，并提供了丰富的插件和规则集，可以根据项目需求进行定制。
Method语法是指在React组件中定义方法时使用箭头函数的语法。相比传统的函数定义方式，使用箭头函数可以避免this绑定问题，使得代码更加简洁和易读。
在ReactJS中，使用箭头函数定义方法可以提供以下优势：
- 明确的this绑定：箭头函数没有自己的this，它会继承外层作用域的this。这样可以避免传统函数中this指向的问题，使得代码更加可靠和易于理解。
- 简洁的语法：箭头函数的语法更加简洁，可以省略function关键字和return语句，减少了代码的冗余和视觉噪音。
- 更好的性能：箭头函数没有自己的this和arguments对象，这样可以减少函数的内部创建和维护，提高了代码的执行效率。
在ReactJS中，使用箭头函数定义方法的应用场景包括但不限于：
- 定义组件的生命周期方法：例如componentDidMount、componentDidUpdate等。
- 定义事件处理函数：例如onClick、onChange等。
- 定义内部辅助方法：例如计算、格式化等。
腾讯云提供了一系列与ReactJS相关的产品和服务，包括但不限于：
- 云服务器（CVM）：提供可扩展的计算资源，用于部署和运行ReactJS应用。
- 云数据库MySQL版（CDB）：提供可靠的数据库服务，用于存储ReactJS应用的数据。
- 云存储（COS）：提供高可用、高可靠的对象存储服务，用于存储ReactJS应用的静态资源。
- 云函数（SCF）：提供无服务器的函数计算服务，用于处理ReactJS应用的后端逻辑。
- 云监控（CM）：提供实时的监控和告警服务，用于监控ReactJS应用的性能和可用性。
更多关于腾讯云产品和服务的介绍，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
我有一个名为user的类，其中有一个名为getDetails的方法。我使用箭头函数作为方法。
问题是当我使用箭头函数eslint显示错误，对于=(相等)，所以我添加了babel-eslint。现在没有显示eslint错误，但是当我运行它显示的代码时
SyntaxError:意外令牌=
// index.js
class User{
constructor(){
this.users = this.getUsers()
}
getUsers = () => {
return ["test1", "test2"]
}
}
//
浏览 1提问于2019-02-22得票数 0
我正在看一个关于React的教程，我看到了这样一句话：
setTimeout(() => {
this.setState({name: "Bob"});
}, 1000)
现在，我承认我是JS的新手，所以我可能对基础知识一无所知，但是() => {}是怎么回事呢？我用谷歌搜索了一下也没什么好结果。欢迎外部引用。
浏览 0提问于2016-06-21得票数 6
回答已采纳
为什么ESLint要拒绝这个？
let myFunc = (state) => {a:"b"};
它是说，它期望一个函数或任务调用。
浏览 0提问于2018-12-11得票数 2
回答已采纳
下面的代码不使用类或this。如何防止仅函数(没有类)代码中的类型标-eslint错误？我知道我可以在全局上禁用这个规则，但是这个规则对于类代码很有用。我知道我一次可以禁用它一行，但是考虑到在TS接口中定义回调函数是多么的常见，这似乎是一件痛苦的事情。还有别的办法吗？
下面是一个简单的问题示例：
interface FooProps {
bar(): void;
}
export function foo(props: FooProps) {
const { bar } = props;
// ^^^ Avoid referencing unbound methods which
浏览 3提问于2020-07-12得票数 13
我知道问题在别的地方，但对我不起作用。
围绕箭头体的意外块语句；将返回的值括号化，并在=>箭头体样式之后立即将其移动。
我试过：
changePage(id) {
this.setState(prevState, props => (...prevState, selectedPageId: id));
};
}
返回以下消息:声明了'prevState‘，但它的值从未被读取。
原始代码：
changePage(id) {
this.setState((prevState, props) => {
return { ..
浏览 1提问于2019-02-12得票数 1
回答已采纳
我有一个JavaScript类，其中有一个异步方法，如下所示。
class ABC {
func = async () => { //----line 10
//some code
}
func2 = () => { //----line 11
//some code
}
}
当我运行ESLint时，它报告了一个错误。应用程序本身正在按预期工作。
unexpected token '=' at line 10 (& 11)
eslintrc.json
{
"env":{
浏览 10提问于2021-12-01得票数 3
回答已采纳
1回答
在下面的代码中，这些胖箭头是做什么的呢？如果他们不是两个人我就能理解了！
export default function clientMiddleware(client) {
return ({dispatch, getState}) => {
// ******** starts here **********
return next => action => {
// ******** ends here **********
if (typeof action === 'function') {
r
浏览 5提问于2016-05-19得票数 4
回答已采纳
4回答
我正在映射一个从API返回的值，并在不存在值的情况下添加一个虚拟值作为防御代码。为此，我使用JS来获得结果。但是不幸的是，我得到了Arrow function should not return assignment错误。在这里，我分享我所实现的代码。请检查并建议我最好的解决方案。我不想禁用eslint错误。提前谢谢。
代码：
const chartData = res.data.map(
(data) => data.latestMetric = data.latestMetric === null ? dummyLatestMetric : data.latestMetri
浏览 27提问于2020-04-17得票数 4
1回答
我有一个场景，我可能不知道是否定义了某个对象属性。如果是，它应该是一个函数，并且应该被调用。如果未定义，则创建备份函数。我正在使用logical ||执行此操作
// handleGetData may be undefined:
const { handleGetData, ActionCreators } = fromSomewhere;
const getData =
handleGetData ||
function () {
dispatch(
ActionCreators.GetData({
param
浏览 2提问于2021-08-05得票数 0
1回答
在下面的React代码中，我无法理解this关键字。我希望你们能帮我脱罪。请检查我的简单反应JS代码。
板类呈现
return( <Comment key={i} index={i} >
{value}
</Comment>
注释类
constructor(){
super();
this.state = {editing:false}
}
render(){
return(<div className="c
浏览 4提问于2016-12-13得票数 0
我正在使用babel6，对于我喜欢的项目，我正在为XMLHttpRequest创建一个包装器，用于我可以使用的方法：
open = (method, url, something) => {
return this.xhr.open(method, url, something);
}
但是对于属性，箭头函数不起作用
这是可行的：
get status() { return this.xhr.status; }
但是我不能用
get status = () => this.xhr.status;
这是故意的吗？
浏览 2提问于2015-11-20得票数 129
回答已采纳
我正在使用typescript和eslint。Eslint对=>箭头之后的返回进行了补充，当我添加它时，它也不起作用-- return new Promise((resolve, reject) => return {}。正确的语法是什么-
function getSizeFromObjectUrl(dataURL: string): Promise<any> {
return new Promise((resolve, reject) => {
try {
const img = new Image();
浏览 1提问于2021-06-04得票数 0
回答已采纳
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代码中，我收到了三个错误，而该函数似乎在应用程序中正常工作。
错误：
[eslint] Unexpected unnamed function. (func-names)
[eslint] Unexpected function expression. (prefer-arrow-callback)
[eslint] Do not access Object.prototype method 'hasOwnProperty' from target object. (no-prototype-builtins)
代码：
const getCount = ca
浏览 0提问于2018-07-31得票数 4
回答已采纳
我有以下课程：
export class MyClass {
private foos: Foo[];
constructor(foos: Foo[]) {
this.foos = foos;
}
getByA = (myA: Mya): Foo => {
return this.foos.find(foo => foo.a === myA) ?? unknownFoo();
};
}
不幸的是，在我的胖箭头函数中，我收到了关于无效this的警告。
ESLint: Unexpected 'this'.(no-invalid-t
浏览 4提问于2021-02-18得票数 2
1回答
为什么我的代码得到：[eslint] Unexpected function expression. (prefer-arrow-callback)？
代码：
kitty.save(function (err) {
if (err) {
console.log('a');
}
});
怎么啦？
浏览 2提问于2018-01-19得票数 2
回答已采纳
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
1回答
我收到了两个错误，我已经将它们缩小到与thunk和async操作相关。 第一个是“错误:操作必须是纯对象。将自定义中间件用于异步操作。“ 第二个是“未处理的拒绝(TypeError)：error.response是未定义的” 指向该项目的github链接在此处：https://github.com/paalpwmd/react_front_to_back/tree/master/itlogger 我的get logs操作如下所示... get // Get logs from server
export const getLogs = async (dispatch) => {
t
浏览 25提问于2020-04-10得票数 1
回答已采纳
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
回答已采纳
1回答
在.eslintrc.js中，我尝试过： rules: {
"object-shorthand": "off", //tried 0 aswell
} 但我还是得到了 error Expected method shorthand object-shorthand 我想使用箭头和常规函数的组合，但eslint一直在抱怨。
浏览 99提问于2021-02-05得票数 0
我一直在犯这个错误：
SyntaxError: Unexpected token '<'
at Loader.moduleStrategy (internal/modules/esm/translators.js:81:18)
at async link (internal/modules/esm/module_job.js:37:21)
我读过很多关于这个错误或类似错误的文章，但它们似乎没有什么关系/帮助。
以下是一个例子：
...
const posts = usePosts()
function App() {
return (
浏览 7提问于2021-04-01得票数 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
当我试图链接我的ESLint类时，Parsing error: Unexpected token =正在抛出一个Es6错误。我缺少哪些配置参数来启用eslint中的fat箭头类方法？
样本类：
class App extends React.Component{
...
handleClick = (evt) => {
...
}
}
.eslint
{
"ecmaFeatures": {
"jsx": true,
"modules":true,
"arrowFun
浏览 7提问于2015-12-12得票数 77
回答已采纳
1回答
当我试图将我的函数部署到firebase时，在使用ESLint时遇到了一个错误。具体来说，当我认为firebase支持箭头函数时，似乎不喜欢箭头函数。我使用默认情况下提供的ESLint，使用firebase init functions初始化函数文件。
/root/functions/helpertools.js
62:84 error Parsing error: Unexpected token =>
第62行是以下代码块中的第一个：
const getCostEstimateBetweenPlaceIDs = async (placeIdOrigin,placeIDdest
浏览 4提问于2022-02-24得票数 2
回答已采纳
3回答
const timezone = {'a' : 1};
const options = map(timezone, (val, key) => {
<option key={val} value={val}>{key}</option>
});
console.log(options); // [undefined]
在箭头函数中有曲线括号，它输出未定义的
const timezone = {'a' : 1};
const options = map(timezone
浏览 8提问于2016-12-06得票数 1
回答已采纳
我目前非常困惑何时应该使用箭头函数，什么时候不应该使用箭头函数。我做了调查，但我还是不清楚。例如，我创建一个按钮来计数单击，代码如下所示：
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {counter: 0};
}
buttonPressedIncrease = () => {
this.setState((prevState) => {
return {counter: prevState.count
浏览 0提问于2018-03-13得票数 0
回答已采纳
当我尝试创建和导出这样的箭头函数时：
export default () => {};
我收到了ESLint的警告：
将箭头函数赋值给变量，然后导出为模块默认值
当然，我可以将它赋值给一个变量，然后导出它。但为什么我不能用另一种方式去做呢？导出箭头函数而不将其分配给某物有什么问题？
浏览 4提问于2021-08-14得票数 9
我试着使用Webpack + Babel在IE >= 11中运行>=功能来获得我的React。设置是自定义的，使用inferno-compat层，所以这里不使用create-react-app。
然而--尽管将最新的babel-polyfill和babel-preset-env实践应用于我的.babelrc和webpack配置，但在尝试用IE11访问应用程序时，我仍然在bundle.js中得到了一个SCRIPT1002:语法错误。
当我遵循IEs控制台中的语法错误引用时，这是生成的bundle.js中冲突的部分(特别是箭头函数)：
function add(x, y) {
if
浏览 6提问于2017-12-06得票数 6
4回答
我正在使用eslint并得到这个错误。
将返回箭头函数中的值
错误显示在代码的第三行。
useEffect(() => {
let initialPrices = {};
data.map(({ category, options }) => {
initialPrices = {
...initialPrices,
[category]: options[0].price,
};
});
setSelectedPrice(initialPrices);
}, []);
浏览 1提问于2021-01-11得票数 1
回答已采纳
3回答
我的代码在应用程序中工作正常，但是我的eslint不喜欢它，并且说我不应该返回赋值。这有什么问题呢？
<div ref={(el) => this.myCustomEl = el} />
浏览 1提问于2018-01-24得票数 60
回答已采纳
我收到ESLint警告：
期望返回一个值art箭头函数的末尾(一致-返回)
errors.details.forEach((error) => {
const errorExists = find(errObj, (item) => { // <== ESLint warning
if (item && item.field === error.path && item.location === location) {
item.messages.push(error.message);
item.type
浏览 3提问于2017-05-14得票数 36
我正在尝试重写父类中的一个方法，但存在一些问题。
下面是我正在尝试的场景的代码片段。
class Parent {
add = () => {
console.log('Parent method');
}
}
class Child extends Parent {
add () {
console.log('Child Method');
}
}
// Creating an instance
const child = new Child();
child.add();
它正在调用父方法add作为箭头函数，可以有人解释为什么会发生这种情
浏览 0提问于2018-07-18得票数 2
回答已采纳
1回答
今天我不得不合并两个对象，选取一个对象a的属性，并将它们放入一个对象b中。我不明白为什么第一个语法/语句不工作，而第二个语法/语句工作。
let user = { a: 1, b: 2 };
let data = { z: 1, c: 3, f: 8, d: 4 };
// Let's say I want user to be { a: 1, b: 2, c: 3}
// method 1 (not works)
const r1 = {
...user,
...({c} = data)
};
document.getElementById("r1
浏览 13提问于2020-05-07得票数 2
回答已采纳
3回答
方法1：
const BasicProfileInfo = (props: BasicProfileInfoProps) => {
return (
<MainContainer>
{....}
</MainContainer>
)
}
方法2：
function BasicProfileInfo(props: BasicProfileInfoProps){
return (
<MainContainer>
浏览 0提问于2018-06-22得票数 2
在使用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
我的问题是试图在render函数中调用selectModal。我认为问题在于我需要在构造函数中绑定selectModal函数，但这没有帮助。我仍然得到同样的错误：
FolderIcon.js:37 Uncaught :无法读取未定义的singleClick (FolderIcon.js:37)的属性“selectModal”
当我在onClick={ () => this.selectModal('Modal A')标签中使用箭头函数时，它会工作，但是只有在双击图像时，我才尝试打开弹出窗口。
这是代码：
class FolderIcon extends Component
浏览 5提问于2020-05-20得票数 1
回答已采纳
1回答
我很难从概念上理解这一点。
因此，我尝试从诺言的第二个.then()函数(this.$store.dispatch(‘setAdditionalUserInfo，doc.data()中使用Vuex存储操作，并得到TypeError的错误:无法读取未定义的属性'$store’。
为什么我不能在.then()函数中访问这个函数？
socialLogin () {
const provider = new firebase.auth.GoogleAuthProvider()
firebase.auth().signInWithPopup(provider)
浏览 1提问于2020-05-12得票数 0
回答已采纳
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick(
浏览 0提问于2019-12-25得票数 0
3回答
我在ReactJS应用程序上得到了意想不到的令牌。但我相信语法是正确的。
import React, { Component } from 'react';
class Auth extends Component {
constructor(){
super()
this.state={
authStatus: "Sign In",
isAuthenticated: false
}
}
AuthMe = () =>{
浏览 3提问于2017-05-09得票数 0
2回答
我在一个小应用程序中为我正在参加的一个类工作，当我使用fetch API时，我遇到了一个问题。
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
map: "",
markers: [],
Data: []
};
}
componentDidMount() {
fetch(
`https://api.foursquare.com/v2/venues/explore?
浏览 0提问于2018-07-29得票数 0
回答已采纳
1回答
我有以下工作代码：
fetchPost (id) {
var mainObject = {},
toReturn = [],
promises = [];
var that = this;
for(var i=id; i<10; i++) {
promises.push(axios.get(`api/posts/${i}`));
}
axios.all(promises).then(function(results) {
results.forEach(function(response) {
toReturn.push(response.da
浏览 2提问于2017-10-12得票数 0
2回答
为什么这段代码会给我警告呢？解决办法是什么？任何帮助都将不胜感激。
const configureStore = () => {
return createStore(
rootReducer,
middleware
);
};
这是我的埃林特配置
{
"parser": "babel-eslint",
"extends": "airbnb",
"plugins": [
"react"
],
"rules": {
浏览 1提问于2016-08-13得票数 2
回答已采纳
我在React应用程序中使用以下包生成Recaptcha组件：
下面是组件的样子，并附带了eslint警告：
this.recaptchaRef的定义如下：this.recaptchaRef = React.createRef();
当我的表单出现错误时，这个引用允许我重置Recaptcha，如：this.recaptchaRef.reset();
在不编写ESlint注释的情况下，如何解决此错误？
浏览 0提问于2018-07-02得票数 1
回答已采纳
1回答
因此，我有以下代码：
public someFunctionName = (someParam: someType): void => {
...some code
};
当我对文件运行eslint时，会得到错误：expected someFunctionName to have a type annotation。
解决这个问题的唯一方法是删除箭头函数并用一个常规函数替换。
有人知道如何解决箭头函数的这个问题吗？
浏览 2提问于2019-11-22得票数 1
如何将箭头函数作为支柱传递给使用钩子的组件，而不必在不应该触发useEffect的情况下触发它？
function Apple(props) {
const { text, cb } = props;
useEffect(() => {
pretendFetch().then(result => cb(result));
// eslint-plugin-react-hooks dictates that `cb` should be within the dependencies array
}, [cb]);
return <div>
浏览 4提问于2020-02-19得票数 1
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
我正在尝试在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
回答已采纳
由于不推荐TSLint，我正在将项目转换为使用ESLint。
我想将缩进规则设置为允许这样做：
type HtmlColor = 'attrib' | 'background' | 'bg_whitespace' | 'comment' | 'entity' | 'error' | 'foreground' |
'invalid' | 'markup' | 'tag' | 'value'
浏览 6提问于2020-01-22得票数 1
exports.sendInvite = functions.firestore
.document("invites/{phoneNumber}")
.onCreate(async (doc) => { //error is here I assume
const from = "+";
const to = doc.data().phoneNumber;
const text = "You can join the club now";
return client.messages.crea
浏览 23提问于2021-03-01得票数 1
回答已采纳
2回答
开玩笑地嘲弄日期
、、
我有一个名为setMockDate的函数，它看起来像：
/**
* @param {Date} expected
* @returns {Function} Call to remove Date mocking
*/
const setMockDate = (expected: Date): AnyObject => {
const RealDate = Date
function MockDate(mockOverride?: Date | number) {
return new RealDate(mockOverride || expected)
}
浏览 3提问于2021-03-23得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
