在事件侦听器函数中无法访问 React 钩子值

Question

我决定使用 React 钩子来使用我的组件，使用 windom width 和调整事件侦听器的大小。问题是我无法访问我需要的当前值。我得到了添加事件侦听器时设置的嵌套值。

将函数传递给值设置器函数对我来说不是解决方案，因为它会强制渲染并破坏我的其他功能。

我附上简约的例子来呈现核心问题：

import React, { Component, useState, useEffect } from 'react';
import { render } from 'react-dom';
const App = () => {
const [width, setWidth] = useState(0);
const resize = () => {
console.log("width:", width); // it's always 0 even after many updates
setWidth(window.innerWidth);
};
useEffect(() => {
resize();
window.addEventListener("resize", resize);
return () => window.removeEventListener("resize", resize);
}, []);
return <div>{width}</div>;
}
render(<App />, document.getElementById('root'));

现场演示在这里

请帮忙。

Answer 1

每次渲染，您都会获得resize函数的新副本。每个副本捕获width的当前值。您的听众有一个副本，该副本是在第一次渲染时使用width = 0创建的。

要解决此问题，您有以下几种选择：

1. width更改时更新侦听器

   useEffect(() => {
   resize();
   window.addEventListener("resize", resize);
   return () => window.removeEventListener("resize", resize);
   }, [width]);
   

2. 使用功能更新获取侦听器内的当前宽度

   const resize = () => {
   setWidth(oldWidth => {
   console.log("width:", oldWidth);
   return window.innerWidth
   });
   };
   

3. 将宽度存储在可变引用中

   const widthRef = useRef(width);
   const resize = () => {
   console.log("width:", widthRef.current);
   widthRef.current = window.innerWidth;
   setWidth(window.innerWidth);
   };