在不存在的行处响应ESLint错误

Question

我正在使用nextjs，当我运行next build时，它会失败，并给出下面的错误。该错误将我指向第19行(这是空行)和第33行(它甚至不存在？)。

对于错误消息本身，我看到了eslint-plugin-react的一个问题，这个问题被认为是最近修复的，但是我仍然收到了package-lock.json中最新更新版本的错误。

"eslint-plugin-react": ">=7.29.4",

我还尝试过删除.next文件夹并再次执行next build，并删除node-modules和执行npm install，仍然会发生错误。

带有错误的文件：

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

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

Answer 1

当呈现一个组件数组时，每个元素都需要一个在数组中唯一的key。

您可以在这里有效地呈现这样一个数组：

stitles: [<Subtitle1/>, <Subtitle2/>]

您可以添加密钥，如：

stitles: [<Subtitle1 key=“1”/>, <Subtitle2 key=“2”/>]

但我认为更好的方法是将组件本身放到数组中，并将呈现推迟到需要时再进行。通过这种方式，您只呈现实际显示的组件：

stitles: [Subtitle1, Subtitle2]

// …

const Cmp = stitles[index % 2];

return (
   …
   <Cmp />
   …
)

Answer 2

我认为在这种情况下，错误可能是一个小错误，它可能意味着您只是简单地需要传递到这个组件的键(假设您的映射)。

尝试将键添加到p元素中

  return(
      <p key={index}>{stitles[index % 2]}</p>
  );

Answer 3

我不认为您将数组stitles作为状态，索引正在增加、状态被更改和呈现函数被触发这一事实已经足够了，为什么不尝试这样做：

return(
   {index%2 == 0 ? (
     ....
     <Subtitle1/>
     ...
   ) : (
     ...
     <Subtitle2/>
     ...
   )}
);