reactjs - 在 React 中渲染列表并得到 Eslint 错误“没有未使用的表达式”
问题描述
我正在重新学习 eslint 并正在为创建反应应用程序进行测试配置,还包括更漂亮的格式化。错误状态编译失败:'期望一个赋值或函数调用,而是看到一个表达式 no-unused-expressions'。我去了 eslint 文档https://eslint.org/docs/rules/no-unused-expressions 并将“允许”添加到规则部分。我该如何解决这个问题,这可能是与 eslint 的更漂亮的格式冲突吗?
错误指向列表项开始的行。
<div>
<ul>
{this.state.list.map((item, index) => {
<li key={index}>
{item}
<button
type="button"
onClick={() => {
this.onRemoveItem(index);
}}>
Remove
</button>
</li>;
})}
</ul>
</div>
这是我的 .eslintrc.json
{
"extends": ["prettier", "prettier/react"],
"plugins": ["react", "jsx-a11y", "import", "prettier"],
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"prettier/prettier": "error",
"arrow-body-style": ["warn", "always"],
"allowShortCircuit": true,
"allowTernary": true
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true
}
},
"env": {
"browser": true,
"node": true,
"es6": true,
"node": true
}
}
解决方案
返回值未使用,因此引发错误:
<div>
<ul>
{this.state.list.map((item, index) => {
return (
<li key={index}>
{item}
<button
type="button"
onClick={() => {
this.onRemoveItem(index);
}}>
Remove
</button>
</li>
);
})}
</ul>
</div>
您也可以使用括号来返回对象:
<div>
<ul>
{this.state.list.map((item, index) => (
<li key={index}>
...
</li>
))}
</ul>
</div>
或者,即使您从<li>
同一行开始,您也可以避免:
{this.state.list.map((item, index) => <li key={index}>
...
</li>
)}
推荐阅读
- java - Is there anyway to Develop Android on VM
- .net - 在批处理脚本中使用 Powershell 的 SFTP
- php - How to fix bizarre incorrect Laravel routing?
- python-2.7 - How to send a captured packet saved as text with Python
- android - Getting error: Could not extract PID of 'io.appium.settings' from ps output - During testing
- aws-sdk -
重新渲染 onSubscriptionMsg,但不使用新数据 - r - 如何在组中运行 summarytools::freq() 而不是单独在变量上运行?
- javascript - 如何使用属性创建计算 Vue
- javascript - 如何让输入提交留在屏幕上而不是闪烁
- python - urllib 没有引发无效的 URL