React JS，在数组上映射时有关键的错误

Question

我有一个数组。我正在使用地图在React中显示它。 React向我抛出有关键的错误，我不知道为什么。有任何想法为何React会引发此错误？

{
    this.state.buttons.map((button, index) => {
       return (
       <>
         {index % 4 === 0 && (
           <div key={`break-${index}`} className="w-100" />
         )}
         <Button key={index} char={button} click={this.pushString} />
       </>
     )
})}

Answer 1

这里的问题是，您将索引传递给了div，它不是map()中返回的顶级组件-<>（React Fragment）是。

此处的快速解决方案是为其提供密钥。但是，由于短语法不支持任何属性，因此您需要使用较长的显式语法在其中声明键：

<React.Fragment key={index}>

Answer 2

{this.state.buttons.map((button, index) => {
               return (
               <div key={index}>
                 {index % 4 === 0 && (
                   <div  className="w-100" />
                 )}
                 <Button char={button} click={this.pushString} />
               <div/>
             )
           })}

键必须是唯一的。通过索引作为键