React unique key-索引和ID不是唯一的密钥属性

Question

我不明白我在列表中唯一的键有什么问题。我有上述错误：

警告：列表中的每个孩子都应该有一个唯一的“键”道具。检查StockDataTable的呈现方法

这是涉及的代码部分：

const tBody = (
    Object.values(dataItems.dataItems).map(item =>
      <>
        <tr key={item.id}>
          <td>
            {item.name}
          </td>
          <td>
            <img src={item.image} alt='' />
          </td>
          <td>
            {item.quantity}
          </td>
          <td>
            {item.price}
          </td>
          <td>
            {item.dueDate}
          </td>
          <td>
            {item.imperative}
          </td>
          <td>
            {item.comment}
          </td>
          <td>
            <Button
              variant='link'
              onClick={event => handleEpandRow(event, item.id)}
            >
              {
                expandState[item.id]
                  ? 'Hide' : 'Show'
              }
            </Button>
          </td>
        </tr>
        <>
          {
            expandedRows.includes(item.id)
              ? <tr}>
                <td colspan='6'>
                  <div style={{ backgroundColor: '#343A40', color: '#FFF', padding: '10px' }}>
                    <h2> Details </h2>
                    <ul>
                      <li>
                        <span><b>Name:</b></span> {' '}
                        <span> {item.name}</span>
                      </li>
                      <li>
                        <span><b>Image:</b></span> {' '}
                        <span> {item.image}</span>
                      </li>
                      <li>
                        <span><b>Quantity:</b></span> {' '}
                        <span> {item.quantity} </span>
                      </li>
                      <li>
                        <span><b>Price:</b></span> {' '}
                        <span> {item.price} </span>
                      </li>
                      <li>
                        <span><b>Due date:</b></span> {' '}
                        <span> {item.dueDate} </span>
                      </li>
                      <li>
                        <span><b>Imperative:</b></span> {' '}
                        <span> {item.imperative} </span>
                      </li>
                      <li>
                        <span><b>Comment:</b></span> {' '}
                        <span> {item.comment} </span>
                      </li>
                    </ul>
                  </div>
                </td>
              </tr>
              : null
          }
        </>
      </>
    )
  )

  return (
    <Container>
      <Row>
        <Col>
          <h1> Stock items</h1>
        </Col>
      </Row>
      <Row>
        <Col sm={12}>
          <Table responsive variant='dark'>
            <thead>
              <tr>
                <th />
                <th>Name</th>
                <th>Image</th>
                <th>Quantity</th>
                <th>Price</th>
                <th>Due date</th>
                <th>Imperative</th>
                <th>Comment</th>
              </tr>
            </thead>
            <tbody>
              {tBody}
            </tbody>
          </Table>
        </Col>
      </Row>
    </Container>
  )

我试图使用索引（即使它被删除），但我仍然有错误消息。我不知道我是否把钥匙放在正确的地方。item.id必须使用几次，但我不知道为什么。




Answer 1

如果您将键设置为第一个JSX标记而不是第二个

Object.values(dataItems.dataItems).map(item => (
  <React.Fragment key={item.id}>
    <tr>
    ... // your code
    </tr>
  </React.Fragment>
));