组件在卸载前正在渲染

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>