为什么我的 useEffect 中的设置状态会导致组件挂载？答案

【问题标题】：Why is set state in my useEffect causing the component to mount?为什么我的 useEffect 中的设置状态会导致组件挂载？
【发布时间】：2022-06-25 22:20:25
【问题描述】：

我有一个 React 组件需要在安装时设置一个接收器，并且该接收器需要读取一个状态值，然后将其设置为一个新值。然而，这会导致组件再次挂载（丢失状态值），有趣的是，发生这种情况时似乎不会触发 unmount。

如果我只是读取状态值就可以了，或者如果我只是写入状态值就可以了，但是我似乎无法读取它然后在 useEffect 中写入它？解决这个问题的正确方法是什么？

const [currentData, setCurrentData] = useState(null);

  // On Mount
  useEffect(() => {
    console.log("mount dataLoaded")
      window.api.receive("dataLoaded", (data) => {
        console.log(currentData)
        setCurrentData({})
    })
  }, [currentData]);

  // on Unmount
  useEffect( () => () => {
    console.log("unmount dataLoaded")
    window.api.removeListeners("dataLoaded")
  }, [] );

【问题讨论】：

标签： reactjs

【解决方案1】：

当您想在卸载期间执行操作时，您可以使用单个 useEffect() 语句并返回一个清理函数。


useEffect(() => {
   //do something here

   return () => {
      //here clean whatever you want. remove listeners etc.
   }
}, [])

【讨论】：