javascript - 在事件监听器函数中无法访问 React hooks 值

Question

我决定使用 windom 宽度和调整大小事件监听器为我的组件使用 React Hook 。问题是我无法访问我需要的当前值。我得到了在添加事件监听器时设置的嵌套值。

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

我附上一个简单的例子来说明核心问题:

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'));

LIVE DEMO IS HERE

求助。

Answer 1

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

要解决此问题，您有多种选择:

1. width 改变时更新监听器

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

2. 使用 functional updates获取监听器中的当前宽度

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

3. 将宽度存储在 mutable reference 中

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