gpt4 book ai didi

javascript - React.js 状态未在 useEffect Hook 中的事件监听器中更新

转载 作者:行者123 更新时间:2023-12-05 00:26:03 25 4
gpt4 key购买 nike

所以,我想要做的是向一个按钮添加一个事件监听器,当按下该按钮时,它会获取一个状态的值并在控制台记录它。但是即使在多次 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>
当我单击 slider 时,该值会发生变化,但是当我按下 id="process"的按钮并带有与之关联的事件监听器时,即使在更新状态后它也只会打印 20。

最佳答案

不要使用像 addEventListener 这样的原生 DOM 方法如果可能的话,在 React 中 - 相反,在 React 中工作以达到相同的效果。它会更有意义,并且需要更少复杂的代码。
将点击监听器放在返回的 JSX 语法中。

<Button
id="process"
variant="contained"
color="primary"
onClick={() => console.log(seamValue)}
>
<Typography>Carve</Typography>
</Button>
如果由于某种原因您绝对无法通过 React 附加点击监听器,则在状态更改时再次附加监听器。另请注意,要启动一个函数,您需要一个 {=> 之后, 除非你使用简洁的 return (你不在这里)。
useEffect(() => {
const seamCarve = document.getElementById("process");
const handler = () => {
console.log(seamValue);
};
seamCarve.addEventListener('click', handler);
return () => seamCarve.removeEventListener('click', handler);
}, [seamValue]);

关于javascript - React.js 状态未在 useEffect Hook 中的事件监听器中更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67244161/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com