[英]React ESLint error at line that doesn't exist
I'm using nextjs and when i run next build
it fails and gives the error below.我正在使用 nextjs,当我运行
next build
时它失败并给出以下错误。 The error points me to line 19 (which is an empty line) and line 33 (which doesn't even exist?).该错误将我指向第 19 行(空行)和第 33 行(甚至不存在?)。
For the error message itself, I saw an issue with eslint-plugin-react
which has supposedly been fixed recently, but I'm still getting the error with the newest updated version in package-lock.json
:对于错误消息本身,我看到了
eslint-plugin-react
的一个问题,据说最近已经修复了,但我仍然在package-lock.json
的最新更新版本中遇到错误:
"eslint-plugin-react": ">=7.29.4",
I have also tried deleting the .next
folder and doing next build
again, and deleting node-modules
and doing npm install
, the error still happens.我也试过删除
.next
文件夹并再次进行next build
,删除node-modules
并进行npm install
,错误仍然发生。
File with the error:有错误的文件:
import Subtitle1 from './subtitle-1'
import Subtitle2 from './subtitle-2'
class SwitchSubtitle extends Component {
constructor(...args) {
super(...args);
this.state = {
stitles: [<Subtitle1/>, <Subtitle2/>],
index: 0
};
}
componentDidMount() {
this.timer = setInterval(() => {
this.setState({index: this.state.index + 1})
}, 3500)
}
render() {
const { index, stitles } = this.state;
return(
<p>{stitles[index % 2]}</p>
);
}
}
export default SwitchSubtitle
Error given from next build
: next build
给出的错误:
info - Checking validity of types
Failed to compile.
./components/landing/switchSubtitle.js
9:19 Error: Missing "key" prop for element in array react/jsx-key
9:33 Error: Missing "key" prop for element in array react/jsx-key
When you render an array of components each element needs a key
that's unique within the array.当您呈现组件数组时,每个元素都需要一个在数组中唯一的
key
。
You're effectively rendering such an array here:您在这里有效地渲染了这样一个数组:
stitles: [<Subtitle1/>, <Subtitle2/>]
You could add keys, like this:您可以添加密钥,如下所示:
stitles: [<Subtitle1 key=“1”/>, <Subtitle2 key=“2”/>]
But I think a better approach would be to put the components themselves in the array and defer rendering until it's needed.但我认为更好的方法是将组件本身放入数组中并推迟渲染,直到需要时再渲染。 This way you're only rendering the component that's actually being displayed:
这样你只渲染实际显示的组件:
stitles: [Subtitle1, Subtitle2]
// …
const Cmp = stitles[index % 2];
return (
…
<Cmp />
…
)
I think that in this case the error is a little missleading, what it propably means is that you just simple need to pass a key to this component(assuming your mapping it)我认为在这种情况下,错误有点误导,它可能意味着您只需要简单地向该组件传递一个密钥(假设您映射它)
Try adding key to p element尝试将键添加到 p 元素
return(
<p key={index}>{stitles[index % 2]}</p>
);
I don't think you nead the array stitles as state, the fact that the index is being incremented and the state being changed and the render function being trigged is enough, why don't you try this:我不认为你需要数组 stitles 作为 state,索引正在递增和 state 被更改以及渲染 function 被触发的事实就足够了,你为什么不试试这个:
return(
{index%2 == 0 ? (
....
<Subtitle1/>
...
) : (
...
<Subtitle2/>
...
)}
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.