useEffect挂钩中事件侦听器中的react.js状态未更新

Question

所以，我要做的是在一个按钮上添加一个事件监听器，当按下该按钮时，它将接受一个状态的值，并将其记录在控制台中。但即使在多次调用setState之后,记录的值也不会更新。

const [seamValue, setSeamValue] = useState(20);

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”的按钮并与之相关联的事件侦听器时，即使在更新状态后，它也只打印20。

Answer 1

尽可能不要在React中使用本机DOM方法，如AddEventListener-而是在React中工作以达到相同的效果。这样会更有意义，而且需要更少的复杂代码。

将click侦听器放在返回的JSX语法中。

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

如果由于某种原因无法通过React附加click侦听器，则在状态更改时再次附加侦听器。还要注意，要启动一个函数，您需要在=>后面加上一个{，除非您使用的是简洁的返回（这里没有）。

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