從表中刪除行，deleteRow(id)、remove() 或在 Reactjs 中使用 useState()

Question

我有一個帶有表的組件，該表加載了 REST API 發送的數據，我的問題比什么都重要，是使用 remove () 或 deleteRow (index) 刪除一行進入 DOM 還是我必須通過狀態 (useState) 操作 DOM 以獲得良好的實踐或類似的東西。

附加信息：在制作靜態網頁時，我已經習慣於直接使用純 javascript 操作 DOM，但是在 React 中，我認為您必須使用 props、state、hook 來操作 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>
  );
}

Answer 2

使用鈎子useState保存數據，然后使用handlerDelete刪除元素並設置數據。 React 將重新渲染組件（因為您的狀態已更改）並且您會得到必要的結果：

https://codesandbox.io/s/cranky-surf-iykn7?file=/src/App.js