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

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

这里的快速解决方法是给它密钥。但是，由于短语法不支持任何属性，因此您需要使用更长的显式语法来声明键：

<React.Fragment key={index}>