reactjs - 使用鼠标事件值更新 react setState

Question

我可以更新状态片刻然后它就卡住了，我可以不经常设置状态吗？

目的是简单地向用户显示光标位置。

import React, { useState } from 'react';

const Inspector: React.FC = () => {

  const [state, setState] = useState({
    offsetX: 0,
    offsetY: 0,
  });

  const canvas = document.getElementById('canvas');
  if (canvas) {
    canvas.addEventListener(
      'mousemove',
      (event) => {
        setState((prev) => ({
          ...prev,
          offsetX: event.offsetX,
          offsetY: event.offsetY,
        }));
      },
      false
    );
  }

  return (
    <div className='inspector'>
      <div className='inspector--container'>
        <div className='inspector--description'>Cursor X</div>
        <input type='text' value={state.offsetX} />
      </div>

      <div className='inspector--container'>
        <div className='inspector--description'>Cursor Y</div>
        <input type='text' value={state.offsetY} />
      </div>
    </div>
  );
};

export { Inspector };

Answer 1

您正在渲染部分进行状态更新。因此，在渲染时更新状态，这会导致另一个渲染，这会导致另一个渲染并继续递归导致内存不足。 React 将捕获相同的内容并避免这种情况发生，但此后不会触发更多状态更新。

使用 useEffect Hook 进行状态更新，你应该没问题。此外，您应该在组件卸载后清除事件监听器。

const Inspector: React.FC = () => {

const [state, setState] = useState({
   offsetX: 0,
   offsetY: 0,
});
useEffect(()=> {
  const canvas = document.getElementById('canvas');
  if (canvas) {
    canvas.addEventListener(
    'mousemove',
    (event) => {
       setState((prev) => ({
         ...prev,
         offsetX: event.offsetX,
         offsetY: event.offsetY,
        }));
      },
    false
   );
  }
 })

 return (
   <div className='inspector'>
     <div className='inspector--container'>
       <div className='inspector--description'>Cursor X</div>
       <input type='text' value={state.offsetX} />
  </div>

  <div className='inspector--container'>
    <div className='inspector--description'>Cursor Y</div>
    <input type='text' value={state.offsetY} />
  </div>
</div>
)};

export { Inspector };