javascript - 从表中删除行、deleteRow(id)、remove() 或在 Reactjs 中使用 useState()

Question

我有一个带有表的组件，该表加载了 REST API 发送的数据，我的问题最重要的是，是否可以通过进入 DOM 的remove()或deleteRow(index)删除一行或我必须通过状态(useState)来操作 DOM，以获得良好的实践或类似的东西。

附加信息:在制作静态网页时，我已经习惯了直接使用纯 javascript 操作 DOM，但在 React 中我认为你必须使用 props、state、hooks 来操作 DOM 元素，还是我错了？我猜一定有这样的情况。

DOM 遍历

export default function App() {
  const data = ['Eli','Smith', 'Jhon']
  const handleDelete = (index,e) => {
      //I can save an ID in <tr> through datasets (data-) 
      //to get it by traversing the DOM when the user clicks and delete it
      //also in my database (API), that's Ok?
      e.target.parentNode.parentNode.parentNode.deleteRow(index)
      
  }
  const rows = data.map((item, index) => {
    return (
      <tr key={index}>
        <td>{item}</td>
        <td><button onClick={e => handleDelete(index,e)}>Delete</button></td>
      </tr>
    )
  })
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <table>
        {rows}
        </table>
    </div>
  );
}

这样可以吗？

或者我是否必须将行置于状态(useState)并通过删除并重新渲染来更新它？

Answer 1

最佳实践是通过状态管理数据，我建议不要手动进行 DOM 操作

export default function App() {
  const [data, setData] = useState(['Eli','Smith', 'Jhon']);
  const handleDelete = (index,e) => {
      setData(data.filter((v, i) => i !== index));
  }
  const rows = data.map((item, index) => {
    return (
      <tr key={index}>
        <td>{item}</td>
        <td><button onClick={e => handleDelete(index,e)}>Delete</button></td>
      </tr>
    )
  })
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <table>
        {rows}
        </table>
    </div>
  );
}