javascript - 使用 React hook useState 在其中一个单元格悬停时突出显示表格的一行时出现问题？

Question

我有一个显示列表的表格。 每行有 3 列:item、delete-button-1、delete-button-2。 当悬停在删除按钮上时，相应的元素以红色突出显示。

我正在使用 React Hook useState 来存储悬停删除按钮的行的索引。

我有两个删除按钮的实现，唯一的区别在于 onClick 属性。 两种实现方式都有问题。

---

删除按钮:实现1

1. 将元素添加到列表
2. 删除所有元素
3. 向列表中添加新元素

问题是新列表的第一项以红色突出显示，直到删除按钮悬停时才会删除。

---

删除按钮:实现2

1. 将元素添加到列表
2. 删除一个元素

问题是，虽然下一行的删除按钮出现在已删除行的删除按钮的位置，但直到重新悬停此删除按钮时，该元素才会突出显示。

---

let id = 0
const {useState} = React

const Table = () => {
  const [list, setList] = useState([])
  const [warningIndex, setWarning] = useState(null)

  const rows = list.map((item, index) => {
    const rowClass = (warningIndex === index) ? "warning" : ""

    return (
      <tr key={index}>
        <td className={rowClass}>{item}</td>
        <td
          className="delete-button"
          onMouseEnter={() => setWarning(index)}
          onMouseLeave={() => setWarning(null)}
          onClick={() => setList([...list.slice(0, index), ...list.slice(index + 1)])}>
          -
        </td>
        <td
          className="delete-button"
          onMouseEnter={() => setWarning(index)}
          onMouseLeave={() => setWarning(null)}
          onClick={() => {
            setList([...list.slice(0, index), ...list.slice(index + 1)])
            setWarning(null)
          }}>
          -
        </td>
      </tr>
    )
  })

  return (
    <table>
      <tbody>
      <tr>
        <td
          className="add-button"
          colSpan="3"
          onClick={() => setList([...list, id++])}>
          +
        </td>
      </tr>
      {rows}
      </tbody>
    </table>
  )
}

ReactDOM.render(<Table/>, document.getElementById('root'));

table {
  width: 200px;
  border-collapse: collapse;
}

td {
  padding: 4px 8px;
  border: 1px solid lightgrey;
}

td.add-button, td.delete-button {
  cursor: pointer;
  width: 1%;
}

td.add-button:hover {
  background-color: lightgrey;
}

td.add-button:active {
  background-color: darkgrey;
}

td.delete-button:hover {
  background-color: #ffcdd2;
}

td.delete-button:active, td.warning {
  background-color: #ef9a9a;
}

<script <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

我想要一个没有任何这些问题的删除按钮的实现。我只想要一个删除按钮，这两个是我试过的。

Answer 1

任何时候你的映射 react 和使用索引作为键，它都有可能导致问题，特别是在添加和删除组件时。

  return (
      <tr key={index}>

使用唯一 key 可能会解决您的问题。有关 React 键的更多信息 React Keys