javascript - 使用初始状态 react useState Hook 事件处理程序

Question

我仍然在思考 React Hooks，但很难看到我在这里做错了什么。我有一个用于调整面板大小的组件，边缘的 onmousedown 我更新状态值然后有一个 mousemove 的事件处理程序，它使用这个值但是它似乎没有值更改后进行更新。

这是我的代码:

export default memo(() => {
  const [activePoint, setActivePoint] = useState(null); // initial is null

  const handleResize = () => {
    console.log(activePoint); // is null but should be 'top|bottom|left|right'
  };

  const resizerMouseDown = (e, point) => {
    setActivePoint(point); // setting state as 'top|bottom|left|right'
    window.addEventListener('mousemove', handleResize);
    window.addEventListener('mouseup', cleanup); // removed for clarity
  };

  return (
    <div className="interfaceResizeHandler">
      {resizePoints.map(point => (
        <div
          key={ point }
          className={ `interfaceResizeHandler__resizer interfaceResizeHandler__resizer--${ point }` }
          onMouseDown={ e => resizerMouseDown(e, point) }
        />
      ))}
    </div>
  );
});

问题出在 handleResize 函数上，这应该使用最新版本的 activePoint ，它是一个字符串 top|left|bottom|right 而是 null。

Answer 1

如何修复过时的useState

目前，您的问题是您正在读取过去的值。当您定义 handleResize 时，它属于该渲染，因此，当您重新渲染时，事件监听器不会发生任何事情，因此它仍然会从其渲染中读取旧值。

有几种方法可以解决这个问题。首先让我们看一下最简单的解决方案。

在范围内创建你的函数

鼠标按下事件的事件监听器将 point 值传递给 resizerMouseDown 函数。该值与您设置 activePoint 的值相同，因此您可以将 handleResize 函数的定义移动到 resizerMouseDown 和 控制台日志(点)。因为这个解决方案非常简单，所以它无法解决您需要在另一个上下文中访问 resizerMouseDown 之外的状态的情况。

See the in-scope function solution live on CodeSandbox.

useRef 读取 future 值

一个更通用的解决方案是创建一个 useRef，只要 activePoint 发生变化，您就可以更新它，这样您就可以从任何陈旧的上下文中读取当前值。

const [activePoint, _setActivePoint] = React.useState(null);

// Create a ref
const activePointRef = React.useRef(activePoint);
// And create our custom function in place of the original setActivePoint
function setActivePoint(point) {
  activePointRef.current = point; // Updates the ref
  _setActivePoint(point);
}

function handleResize() {
  // Now you'll have access to the up-to-date activePoint when you read from activePointRef.current in a stale context
  console.log(activePointRef.current);
}

function resizerMouseDown(event, point) {
  /* Truncated */
}

See the useRef solution live on CodeSandbox.

附录

应该注意的是，这些不是解决此问题的唯一方法，但这些是我的首选方法，因为尽管一些解决方案比其他提供的解决方案更长，但逻辑对我来说更清晰。请使用您和您的团队最了解和找到的最能满足您的特定需求的解决方案；不要忘记记录您的代码的作用。