React.js State 未在 useEffect Hook 中的事件侦听器中更新

Question

所以，我想要做的是向一个按钮添加一个事件监听器，按下该按钮时会获取 state 的值并在控制台记录它。 但是即使在多次 setState 调用之后，记录的值也不会更新。

    useEffect(() => {
      const seamCarve = document.getElementById("process");
    
      seamCarve.addEventListener("click", (e) => {
        console.log(seamValue);
      });
    }, []);

然后是触发它的按钮

          <div id="seamvalue">
            <Typography variant="h6" align="center">
              Seams Reduction:<span id="valueOfSeam"> {seamValue} </span>
            </Typography>
          </div>
    
          <Button
            id="leftslider"
            variant="contained"
            color="primary"
            onClick={() =>
              seamValue - 10 > 0 ? setSeamValue(seamValue - 10) : setSeamValue(0)
            }
          >
            <Typography>{"<"}</Typography>
          </Button>
    
          <Button
            id="rightslider"
            variant="contained"
            color="primary"
            onClick={() => setSeamValue(seamValue + 10)}
          >
            <Typography>{">"}</Typography>
          </Button>
    
          <Button id="process" variant="contained" color="primary">
            <Typography>Carve</Typography>
          </Button>

当我单击滑块时，该值会发生变化，但是当我按下带有关联事件侦听器的 id="process" 按钮时，即使在更新 state 之后，它也只会打印 20。

Answer 1

如果可能的话，不要在 React 中使用像addEventListener这样的原生 DOM 方法——相反，在React 中工作以达到相同的效果。 它会更有意义，并且需要更少复杂的代码。

将点击监听器放在返回的 JSX 语法中。

<Button
    id="process"
    variant="contained"
    color="primary"
    onClick={() => console.log(seamValue)}
>
    <Typography>Carve</Typography>
</Button>

如果由于某种原因您绝对不能通过 React 附加点击侦听器，请在 state 更改时再次附加侦听器。 另请注意，为了启动 function，您需要在=>之后添加一个{ ，除非您使用的是简洁返回（您不在这里）。

useEffect(() => {
    const seamCarve = document.getElementById("process");
    const handler = () => {
        console.log(seamValue);
    };
    seamCarve.addEventListener('click', handler);
    return () => seamCarve.removeEventListener('click', handler);
}, [seamValue]);

Answer 2

State 变量不会在 EventListener 中自行更新。 如果您想在 EventListener 中更新和访问某些 state，请查看useRef 。 此外，您需要用useEffect替换您的第二个useState语句，因为这是您想要实现的。 应该回答您的问题的相关帖子： Wrong React hooks behavior with event listener

编辑：正如@CertainPerformance 所说，像onClick这样的事件监听器可以直接在 jsx 中使用。 我的回答适用于在document上使用事件侦听器。