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

Question

dataLine使用时更新的解决方法是什么data.Items.map()我收到 eslint 错误：Assignment to property of function parameter 'dataLine'你可以看到我正在删除Other属性并修改dataLine.Configconst 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

关于 eslint，我认为这是一个缺失的部分，因为如果您以等效的方式编写函数：

data.Items.map((dataLine) => {

  if (data.Type == "API") {

    dataLine.Config = {

      Size: "L"

    };

    delete dataLine.Other;

  }

  return dataLine;

});

你不会收到任何警告。也许这是在那里打开问题的情况。

您可以传递 {props : true} ，就像 GProst 所说的那样，但这将强制您不要分配参数的任何属性，这是一件好事，例如：

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;

});

为什么 eslint 有这样的规则？

您正在修改 data.Items 的属性，这会对地图上的回调函数的外部环境产生副作用。在某些情况下，这会让你处于糟糕的境地，比如不知道哪一段代码删除了某些属性。

关于如何安全地处理这个问题的建议是返回一个全新的对象，使您的 data.Items 在您的情况下不可变：

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

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

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