禁止在迭代器和支持扩展中缺少元素的“键”支柱。
我的代码中出现了这两个错误，我如何修复这些错误，而不用为这一行使用“抑制下一行反应/jsx-道具-无传播/或eslint-禁用-下一行反应/jsx键”呢？
<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"
}回答 2
Stack Overflow用户
发布于 2022-04-04 18:05:17
缺少迭代器中元素的“键”支柱
此错误来自于在React中对数组使用.map()方法。当您使用.map()时，React想要一种方法来轻松地区分它正在映射的每一个项目，当它比较DOMs时。要解决这个问题，只需向每个项添加一个具有唯一标识符的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 *
- Disabling
react/jsx-props-no-spreading
- Do
- ，该项目的ESLint配置中ESLint支柱扩展错误的一行如下所示：
react/jsx-props-no-spreading
- Do不使用扩展。在呈现元素之前，先整理扩展参数，然后传递它，然后
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的道具上也发生了这种情况，您可以遵循同样的规则。希望这能有所帮助！
Stack Overflow用户
发布于 2022-04-04 17:56:16
对于禁止扩展支持的错误，请参考：
How to resolve eslint error: "prop spreading is forbidden" in a custom route component?
对于缺少键错误:您需要提及UitkTableCell中映射返回项的唯一值&
https://stackoverflow.com/questions/71741214
复制相似问题
腾讯云开发者
