反应唯一键 - 索引和 ID 不是唯一键道具

Question

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

警告：列表中的每个孩子都应该有一个唯一的“key”道具。查看 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>
  )

我尝试使用 index（即使它已被贬低），但我仍然收到错误消息。我不知道我是否将 key 设置在正确的位置。 item.id 必须多次使用，但我不知道为什么。

项目看起来像这样：

Answer 1

如果将key 设置为第一个JSX 标记而不是第二个<tr> 会怎样？我认为这就是导致您出现问题的原因，因为您将 key 设置为内部标签而不是外部标签。 React.Fragment 与 <> 相同。

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