Reactjs 回应环境,；useEffect显示过时数据

在组件中，当某个值发生变化时，我使用

useffect

执行某些操作。现在，它只是一个简单计数器的值，但在现实世界中，它将是一个数组，其中项目被删除或添加，等等。稍微复杂一点

在

useffect

中，我还有一个调整大小检测。同样，在这个例子中不是很有趣

const App = props => {
  const [count, dispatch] = useReducer((state, action) => {
    switch (action.type) {
      case 'INCREMENT':
        return state + 1;
      case 'DECREMENT':
        return state - 1;
      default:
        return state;
    }
  }, 0);
  return (
    <CountContext.Provider value={{ count, dispatch }}>
      <div className="App">
        <h1>App</h1>
        <Counter />
      </div>
    </CountContext.Provider>
  );
};

const Counter = () => {
  const counter = useContext(CountContext);

  useEffect(() => {
    window.addEventListener('resize', () => {
      console.log(counter.count);
    })
  },[counter])

  return (
    <div className="Counter">
      <p>Counter: {counter.count}</p>
      <input
        type="button"
        value="+"
        onClick={() => counter.dispatch({ type: 'INCREMENT' })}
      />
      <input
        type="button"
        value="-"
        onClick={() => counter.dispatch({ type: 'DECREMENT' })}
      />
    </div>
  );
};

const-App=props=>{
const[count，dispatch]=useReducer（（状态，操作）=>{
开关（动作类型）{
案例“增量”：
返回状态+1；
“减量”一案：
返回状态-1；
违约：
返回状态；
}
}, 0);
返回(
应用程序
);
};
常量计数器=（）=>{
常量计数器=useContext（CountContext）；
useffect（（）=>{
window.addEventListener（'resize'，（）=>{
控制台日志（计数器计数）；
})
}[柜台]）
返回(
计数器：{Counter.count}

counter.dispatch（{type:'INCREMENT'}）}
/>
counter.dispatch（{type:'DECREMENT'}}
/>
);
};

问题是，当我调整视口大小时，

console.log（counter.count）

显示所有以前的值：

---

问题是useEffect（）方法中存在内存泄漏。您需要在重新渲染时进行清理。我分叉了你的沙箱，并用这个进行了测试，它按预期工作：

useffect（（）=>{
const resizeEvent=（）=>{
控制台日志（计数器计数）；
};
addEventListener（“resize”，resizeEvent）；
return（）=>{
removeEventListener（“resize”，resizeEvent）；
};
}，[柜台]；

---

请注意，将代码的清理和重构返回到被调用的函数，以便在卸载时可以正确删除它。

问题是useEffect（）方法中存在内存泄漏。您需要在重新渲染时进行清理。我分叉了你的沙箱，并用这个进行了测试，它按预期工作：

useffect（（）=>{
const resizeEvent=（）=>{
控制台日志（计数器计数）；
};
addEventListener（“resize”，resizeEvent）；
return（）=>{
removeEventListener（“resize”，resizeEvent）；
};
}，[柜台]；

---

请注意，将代码的清理和重构返回到被调用的函数，以便在卸载时可以正确删除它。

每次状态更改时，您都会添加一个新的eventListener。三个更改-三个eventListeners。此外，当卸载计数器组件时，侦听器将保持活动状态，从而导致内存泄漏。 首先，您可以在useEffect之外使用此部分：

window.addEventListener('resize', () => {
      console.log(counter.count);
    })

useEffect(() => {
  // your main logic here
  ...
  // cleaning up function:
  return () => {
    removeEventListener, unsubscribe etc...
  }

}, [])

或者您应该在useEffect中使用空数组作为依赖项列表，然后它将只触发一次：

useEffect(() => {

}, []) // empty array here says 'do it once'

最后，useEffect是获取数据或订阅事件等的理想场所，但不要忘记在不再需要该组件后清除所有内容。为此，请返回useEffect中的清洗功能：

window.addEventListener('resize', () => {
      console.log(counter.count);
    })

useEffect(() => {
  // your main logic here
  ...
  // cleaning up function:
  return () => {
    removeEventListener, unsubscribe etc...
  }

}, [])

---

每次状态更改时，都会添加一个新的eventListener。三个更改-三个eventListeners。此外，当卸载计数器组件时，侦听器将保持活动状态，从而导致内存泄漏。 首先，您可以在useEffect之外使用此部分：

window.addEventListener('resize', () => {
      console.log(counter.count);
    })

useEffect(() => {
  // your main logic here
  ...
  // cleaning up function:
  return () => {
    removeEventListener, unsubscribe etc...
  }

}, [])

或者您应该在useEffect中使用空数组作为依赖项列表，然后它将只触发一次：

useEffect(() => {

}, []) // empty array here says 'do it once'

最后，useEffect是获取数据或订阅事件等的理想场所，但不要忘记在不再需要该组件后清除所有内容。为此，请返回useEffect中的清洗功能：

window.addEventListener('resize', () => {
      console.log(counter.count);
    })

useEffect(() => {
  // your main logic here
  ...
  // cleaning up function:
  return () => {
    removeEventListener, unsubscribe etc...
  }

}, [])

---

谢谢这就是诀窍。因此，在我的状态/内存（？）中有多个事件侦听器仍然“活动”。当我更改视口时，每个事件侦听器都会输出它们在内存中的

计数器.count

？这是一个相当抽象的错误！谢谢这就是诀窍。因此，在我的状态/内存（？）中有多个事件侦听器仍然“活动”。当我更改视口时，每个事件侦听器都会输出它们在内存中的

计数器.count

？这是一个相当抽象的错误！