迭代器中的元素缺少 "key" 属性，并且禁止传播属性

Question

我的代码中出现了这 2 个错误，如何在不使用“suppress eslint-disable-next-line react/jsx-props-no-spreading/ or eslint-disable-next-line react/jsx-key”的情况下修复这些错误对于这一行？

 <UitkTableHead>
              {headerGroups.map((headerGroup) => (
                <UitkTableRow {...headerGroup.getHeaderGroupProps()}> //  Prop spreading is forbidden 
                  {headerGroup.headers.map((column) => (
                    <UitkTableCell scope="col" {...column.getHeaderProps()}> //Missing "key" prop for element in iterator 
                      {column.render('Header')}
                    </UitkTableCell>
                  ))}
                </UitkTableRow>
              ))}

我希望让代码停止显示这些错误，如何更改代码以使其发生而不是添加忽略注释。

编辑：这是我的规则

 "rules": {
        "@typescript-eslint/ban-ts-comment": [
          "error",
          {
            "ts-ignore": "allow-with-description"
          }
        ],
        "react-hooks/rules-of-hooks": "error",
        "react-hooks/exhaustive-deps": "warn",
        "class-methods-use-this": "off",
        "no-shadow": "off",
        "import/no-extraneous-dependencies": "off",
        "no-use-before-define": "off",
        "@typescript-eslint/no-use-before-define": ["error", {"variables": false}],
        "import/extensions": "off",
        "react/prop-types": "off",
        "react/require-default-props": "off",
        "@typescript-eslint/explicit-function-return-type": "off",
        "global-require": "off",
        "import/no-dynamic-require": "off",
        "camelcase": "off",
        "react/jsx-props-no-spreading": "off",
        "no-empty-function": "off",
        "@typescript-eslint/no-empty-function": "off",
        "@angular-eslint/no-empty-lifecycle-method": "off"
      }

Answer 1

Prop spreading is forbidden 错误参考：

缺少密钥错误：您需要在 UitkTableCell 中提及地图返回项的唯一值，如

Answer 2

Missing "key" prop for element in iterator

此错误来自于在 React 中对数组使用 .map() 方法。当你使用 .map() 时，React 想要一种方法来在比较 DOM 时轻松区分它正在映射的每个项目。要解决这个问题，您需要做的就是为每个项目添加一个带有唯一标识符的key，如果您没有唯一标识符，则可以在.map()中添加一个参数来获取当前使用的项目索引：

{headerGroup.headers.map((column, index) => (
    <UitkTableCell key={index} scope="col" {...column.getHeaderProps()}>
        {column.render('Header')}
    </UitkTableCell>
))}

重要说明，这种使用索引的方式只能在您自己无法提供唯一键的情况下使用，无论是通过生成唯一键的库还是给每个对象一个 key 属性他们自己。

Prop spreading is forbidden

解决这个问题的最简单方法是告诉 ESLint 在解析该错误时不要考虑此文件，但有不同的方法：

通过将此注释放在组件文件的第 1 行来禁用特定文件的 ESLint prop 传播错误：/* eslint-disable react/jsx-props-no-spreading *
为项目的 ESLint 配置中的 ESLint prop 传播错误禁用以下行：react/jsx-props-no-spreading
不要使用传播。在渲染元素之前解构传播参数，传递它，然后 return 您想要渲染的映射参数：

{headerGroups.map((headerGroup) => (
    const hgProps = headerGroup.getHeaderGroupProps();
    return (
        <UitkTableRow {hgProps}>
            {headerGroup.headers.map((column, index) => (
                <UitkTableCell key={index} scope="col" {...column.getHeaderProps()}>
                    {column.render('Header')}
                </UitkTableCell>
            ))}
        </UitkTableRow>
    )
))}

如果在 uitkTableCell 的道具下方也发生这种情况，您可以遵循相同的规则。希望这对您有所帮助！

迭代器中的元素缺少 "key" 属性，并且禁止传播属性

Missing "key" prop for element in iterator and Prop spreading is forbidden

jsx

reactjs