React唯一键索引和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

如果您将key设置为第一个<tr>标记而不是第二个<tr>标记怎么办？我认为这就是导致问题的原因，因为您正在将key设置为内部标记，而不是外部标记。React.Fragment和<>是一样的。

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