我目前正在使用 create-react-app 創建一個新的 React 應用程式。之后我安裝了擴展插件的 eslint：react/recommended 和 google。2 周前我做了同樣的事情，我沒有遇到任何問題，但是從 2 天開始，我現在在每個 html 行的 index.tsx 和 App.tsx 檔案中都收到“缺少陣列中元素的“鍵”道具”錯誤。
索引.tsx
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'),
);
應用程式.tsx
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;
在 App.tsx 中，我在<div className="App"></div>
我不知道為什么會收到此錯誤，但從plugin:react/recommended.eslintrc.yml 中洗掉會洗掉錯誤。可能是因為在該規則集中應用了 react/jsx-key 規則。
我也嘗試洗掉eslintConfig塊 frmo package.json
額外資訊
版本
- 節點：16.14.0
- 下午：8.5.2
包.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"
}
}
.eslintrc.yml
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
}
知道這里發生了什么以及如何解決這個問題。
uj5u.com熱心網友回復：
這是來自新版本 (7.29.0)react/jsx-key中插件規則的錯誤。eslint-plugin-react
這里已經報道了。
您可以將您的版本降級eslint-plugin-react到 7.28.0，直到問題得到解決。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/432995.html
標籤：javascript 反应 埃斯林特 创建反应应用