[英]Missing "key" prop for element in array after creating app with create-react-app
I'm currently creating a new React application with create-react-app.我目前正在使用 create-react-app 创建一个新的 React 应用程序。 After that I install eslint that extends plugin:react/recommended and google.
之后,我安装了扩展插件的 eslint:react/recommended 和 google。 2 weeks ago I did the same and I had no problems but since 2 days I now get a "Missing "key" prop for element in array" error in my index.tsx and App.tsx files for each html line.
2 周前我做了同样的事情,我没有遇到任何问题,但从 2 天开始,我的 index.tsx 和 App.tsx 文件中的每 html 行都出现了“缺少数组中元素的“键”道具”错误。
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App /> <!-- Here I get a missing key prop error -->
</React.StrictMode>,
document.getElementById('root'),
);
import './App.css';
import React from 'react';
import logo from './logo.svg';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
In the App.tsx I get the missing key prop error on all lines inside the <div className="App"></div>
在 App.tsx 中,我在
<div className="App"></div>
内的所有行上都收到了 missing key prop 错误
I have no idea why I'm getting this error but removing the plugin:react/recommended
from.eslintrc.yml removes the errors.我不知道为什么会收到此错误,但删除
plugin:react/recommended
from.eslintrc.yml 会删除错误。 Probably because the react/jsx-key rule is applied in that ruleset.可能是因为在该规则集中应用了 react/jsx-key 规则。
I'm also tried removing the eslintConfig
block frmo package.json我也尝试删除
eslintConfig
块 frmo package.json
{
...
"dependencies": {
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.4.1",
"@types/node": "^16.11.26",
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.11",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"typescript": "^4.5.5",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.12.1",
"@typescript-eslint/parser": "^5.12.1",
"eslint": "^8.9.0",
"eslint-config-google": "^0.14.0",
"eslint-plugin-react": "^7.29.0"
}
}
env:
browser: true
es2021: true
extends:
- plugin:react/recommended
- google
parser: '@typescript-eslint/parser'
parserOptions:
ecmaFeatures:
jsx: true
ecmaVersion: latest
sourceType: module
plugins:
- react
- '@typescript-eslint'
rules: {
require-jsdoc: 0
}
Any idea what is happing here and how I can solve this problem.知道这里发生了什么以及我如何解决这个问题。
UPDATE: The issue has been fixed in v7.29.1 .更新:该问题已在v7.29.1中修复。
This is an error coming from the rule react/jsx-key
of the plugin eslint-plugin-react
in its new release (7.29.0).这是来自新版本 (7.29.0) 插件
eslint-plugin-react
的规则react/jsx-key
的错误。
It has been reported here .它已被报道在这里。
You could downgrade your version of eslint-plugin-react
to 7.28.0 until the issue is fixed.您可以将
eslint-plugin-react
的版本降级到 7.28.0,直到问题得到解决。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.