reactjs - 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} />
       </>
     )
})}

标签： reactjs

Answer 1

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

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

<React.Fragment key={index}>