組件在卸載前正在渲染

Question

我一直在做一個項目，在卸載它之前我想要一個div ID。

我嘗試使用以下代碼：

useEffect(()=>
  return()=>getId
),[state])

但是div在使用Effect之前被設置為null 。

為了解決這個問題，我寫了一個示例代碼，從中我觀察到一些非常奇怪的 React 在卸載之前渲染組件。

示例代碼

您可以在上面提到的代碼中單擊測試按鈕時看到類似的行為。

如果有人知道它是如何工作的，請解釋或建議任何替代方法。

Answer 1

從 useEffect 返回 function 允許你自己清理，比如刪除事件監聽器和取消訂閱。 它不應該真正被認為是一個“卸載”回調。

如果您想知道要通過單擊按鈕刪除哪個元素，可以在將單擊處理程序提供給按鈕時部分應用 function。 這允許您為所有按鈕設置一個單擊處理程序，您可以在其中根據實現它的位置為其提供一些額外的上下文。

const handleClick = (id: string) => (event: ChangeEvent<HTMLButtonElement>) => {
  // ...handle the click
}

// ...in your render fn
<button onClick={handleClick("div-id-1")}>Remove Div 1</button>