禁止迭代器中元素缺少"key"道具和道具传播

Question

我的代码中出现了这两个错误，如果不使用"抑制eslint-disable next line react/jsx props no spreading/或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

缺少"键"；迭代器中元素的道具

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

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

重要的是，只有当您自己无法提供唯一键时，才应使用这种使用索引的方式，无论是通过生成唯一键的库，还是通过为每个对象本身提供key属性。

禁止道具传播

修复该错误的最简单方法是告诉ESLint在分析该错误时不要考虑该文件，但有不同的方法：

1. 通过将此注释放在组件文件/* eslint-disable react/jsx-props-no-spreading *的第1行，禁用特定文件的ESLint道具传播错误
2. 在项目的ESLint配置中为ESLint道具散布错误禁用以下行：react/jsx-props-no-spreading
3. 不要使用涂抹。在渲染元素之前取消排列参数的结构，改为传递该参数，然后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道具中也发生了这种情况，您可以遵循相同的规则。希望这能有所帮助！

Answer 2

道具扩散被禁止错误参考：

如何解决esint错误：；道具散布被禁止"；在自定义管线组件中？

对于丢失的密钥错误：您需要提及UitkTableCell中映射返回项的唯一值<UitkTableCell scope＝"；col"；key＝｛column.unique_id｝