javascript - Arrow function should not return assignment Eslint - Stack Overflow

admin管理员组

文章数量:1317906

I am map'ing a value that is returned from API and adding a dummy value as defensive code if value is not present. For that i am using JS Map to obtain the result. But unfortunately i am getting eslint error Arrow function should not return assignment . Here i am sharing the code of what i implemented. Pls check and advice me the best solution. I dont want to disable the eslint errors. Thanks in Advance.

Code:

 const chartData = res.data.map(
    (data) => data.latestMetric = data.latestMetric === null ? dummyLatestMetric : data.latestMetric
  );

Error:

Arrow function should not return assignment. eslint (no-return-assign)

I am map'ing a value that is returned from API and adding a dummy value as defensive code if value is not present. For that i am using JS Map to obtain the result. But unfortunately i am getting eslint error Arrow function should not return assignment . Here i am sharing the code of what i implemented. Pls check and advice me the best solution. I dont want to disable the eslint errors. Thanks in Advance.

Code:

 const chartData = res.data.map(
    (data) => data.latestMetric = data.latestMetric === null ? dummyLatestMetric : data.latestMetric
  );

Error:

Arrow function should not return assignment. eslint (no-return-assign)

• javascript
• reactjs
• eslint
• eslint-config-airbnb

Share Improve this question Follow asked Apr 17, 2020 at 0:49 SDKSDK 1,51833 gold badges2828 silver badges5555 bronze badges 6

• 2 data.latestMetric = data.latestMetric ? – qiAlex Commented Apr 17, 2020 at 0:51
• sorry , i am not getting it – SDK Commented Apr 17, 2020 at 0:58
• const chartData = res.data.map( (data) => data.latestMetric =( data.latestMetric === null ? dummyLatestMetric : data.latestMetric) ); – SDK Commented Apr 17, 2020 at 0:59
• eslint/docs/rules/no-return-assign – qiAlex Commented Apr 17, 2020 at 1:00
• by the way, what do you want to return in .map? do you want to have a collection of data or data.latestMetric ? – qiAlex Commented Apr 17, 2020 at 1:03

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 2

Arrow Function

An arrow function expression is a syntactically pact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.

Map Function

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

---

.map() function would require you to return a value for every iteration. If you only want to loop through an array to do side effects, you can consider forEach or other loop function.

In your case, I see you want to modify the latestMetric in res.data conditionally, you can do this:

const chartData = res.data.map(data => ({
  ...data,
  latestMetric: data.latestMetric === null ? dummyLatestMetric : data.latestMetric,
});

The spread syntax will spread the data properties into a new object, and then we conditionally set the value of latestMetric based on the condition

If you don't want to use the spread syntax, you can also use the traditional Object.assign method:

const chartData = res.data.map(data => Object.assign({}, data, {
  latestMetric: data.latestMetric === null ? dummyLatestMetric : data.latestMetric,
});

---

About your defensive strategy, you might be interested in using || syntax for that, but be careful as it validates for all falsy values (it includes: false, 0, null, undefined, etc.)

const chartData = res.data.map(data => ({
  ...data,
  latestMetric: data.latestMetric || dummyLatestMetric,
});

---

Last but not least, it might be better for you to understand the ESLint rule first, and read the reason behind that coding practice, to see if you want to use that rule, or modify it or even disable it for your project.

Ref: https://eslint/docs/rules/no-return-assign

Since you are not explicitly returning a value from the arrow function, eslint wants you to use a function with a body.

This should fix it:

 const chartData = res.data.map(
    (data) => {
      data.latestMetric = data.latestMetric === null ? dummyLatestMetric : data.latestMetric;
 });

The problem:

https://eslint/docs/rules/no-return-assign

This rule tells that you are not permitted to return an assign operations like this:

return a = 3 // or similar.

But this is exactly what you are doing, so

The trick is to return an object/property, but not an assigning operation =.

It's not clear what do you interesting in to be returned in .map, do you want to return the whole data or only data.latestMetric, so my answer also consists of two cases:

if you need to modify data and return it, try this:

const chartData = res.data.map(
  data => (data.latestMetric = data.latestMetric === null ? dummyLatestMetric : data.latestMetric) && data
  // updated data.latestMetric and then returning a whole object
);

if you need only data.latestMetric then try this:

const chartData = res.data.map(
  data => data.latestMetric === null ? dummyLatestMetric : data.latestMetric
);

You need to return the value:

const chartData = res.data.map((data) => {
  data.latestMetric = data.latestMetric === null ? dummyLatestMetric : data.latestMetric;
  return data;
});

本文标签： javascriptArrow function should not return assignment EslintStack Overflow