Question

我制作了一个create组件，可以呈现所有看起来不错的东西，但是当我在浏览器中进行控制台操作时，它出现了以下错误。

index.js：2178警告：数组或迭代器中的每个子代都应具有一个独特的“钥匙”道具。

我尝试使用关键道具，但仍然出现此错误。请在下面查看我的代码并提出建议！非常感谢。

    const serviceList = (props) => (

  <CardBody style={{ backgroundImage: `url(${ServiceBgImg})` }}>

    <div>
      <h3 style={{ fontWeight: 'bold' }}
      >{props.groupName}</h3>
      {props.allServices.filter(groupedServices => groupedServices.category === props.groupName)
        .map(serviceInfo =>
          <List component='nav'>
            <ListItem>
              <ListItemText primary={
                <div key={serviceInfo.id}>
                  <h5  style={{ fontWeight: 'bold' }}>
                    <span>{serviceInfo.service}</span>
                    <span
                      style={{ float: 'right' }}
                    >{serviceInfo.price}</span>
                  </h5>
                  <h5>
                    {serviceInfo.description}
                  </h5>
                </div>
              }
              />
            </ListItem>
          </List>
        )
      }
    </div>

  </CardBody>
);

export default serviceList;

Answer 1

由map函数返回的最外面/父元素需要具有key属性。在您的情况下，不是<div>而是<List>，这似乎是一个错误，因为您似乎想遍历allServices的过滤结果以创建{{ 1}}。如果是这种情况，则应将地图功能移到serviceInfo上方，并为其分配<ListItem>道具。

代码示例如下：

key

Answer 2

您的列表组件应该包装map函数，并在其中添加键到映射的ListItems：

<List component='nav'>
...
.map((serviceInfo, index) =>
    <ListItem key={index}>
      ...
    </ListItem>
    ....

React Component需要一个独特的键道具

2 个答案: