使用地图时出现 ESlint 错误 - 解决方法？

Question

What is the workaround to update the dataLine when using data.Items.map()

I am getting eslint error:

Assignment to property of function parameter 'dataLine'

You can see I am deleting Other property and modifying dataLine.Config

 const data = { Type: "API", Items: [{ State: [{Name: "Pending"}], Config: { Size: "M" }, Other: "string.." }] } const newItems = data.Items.map(({State,...dataLine}) => { if (data.Type == "API") { dataLine.Config = { Size: "L" }; delete dataLine.Other; } return dataLine; }); console.log(JSON.stringify(newItems, null, 2));

Answer 1

About eslint, I think it's a missing piece, because if you write your function in an equivalent way:

data.Items.map((dataLine) => {
  if (data.Type == "API") {
    dataLine.Config = {
      Size: "L"
    };
    delete dataLine.Other;
  }
  return dataLine;
});

you won't receive any warning. Maybe it's the case of open an issue there.

You could pass {props : true}, like GProst said, but this will enforce you to not make the assignment of any property of the parameter, which is a good thing, for example:

const newItems = data.Items.map(({State,...dataLine}) => {
  if (data.Type == "API") {
    dataLine.Config = { // not allowed with props : true
      Size: "L"
    };
    delete dataLine.Other; // not allowed with props : true
  }

  return dataLine;
});

Why eslint have such a rule?

You are modifying the properties of data.Items, this will cause side effects on the external environment of the callback function on map. In some cases this will put you in bad situation, like not knowing which piece of code removed some property.

A suggestion about how you can deal with this safely is return an entire new object to make your data.Items immutable in your case:

 const data = { Type: "API", Items: [{ State: [{Name: "Pending"}], Config: { Size: "M" }, Other: "string.." }] } const newItems = data.Items.map(({State,...dataLine}) => { const dataLineCopy = JSON.parse(JSON.stringify(dataLine)) if (data.Type == "API") { dataLineCopy.Config = { Size: "L" }; delete dataLineCopy.Other; } return dataLineCopy; }); console.log(JSON.stringify(newItems, null, 2));

Answer 2

在 eslint 配置中编辑no-param-reassign规则，将 option props设置为false ：

"no-param-reassign": ["error", { "props": false }]