在useState挂钩中设置状态后，React状态变量不准确

Question

我有一个React函数组件，沿着遗留的JQuery应用程序运行。在JQuery元素上调用事件处理程序时，传递当前React状态默认值为初始状态值，而不是更新后的状态值。

已验证的x状态正在通过useEffect钩子更改，但在调用事件侦听器时，x设置为初始状态值，而不是更新后的状态值。

function MyComponent(props) {
   const [x, setX] = useState(false);

// On initial render
useEffect(() => {
   props.jQueryButton.addEventListener('click', onXSave)
}, [])

useEffect(() => {
    console.log("x changed " + x); // everytime onXChange is called, x 
    state is updated with the checked value, and this console.log shows 
    the correct state value
}, [x]);

onXChange = event => {
   setX(event.target.checked); // checked is true in this context
};

onXSave = event => {
  const obj = { x: x}; // x is false here, even though the state in this context shows it to be true.
  };
}

不会显示任何错误消息。在本文的上述代码中，我希望onXSave方法调用中的x状态为true，但它一直显示为false。

Answer 1

onXSave在初始渲染时作为处理程序添加，因此x具有该时间的值。在每次渲染时重新创建onXSave，这并不重要，因为它在初始渲染后从未使用过。

要解决这个问题，您可以将x放入ref

unction MyComponent(props) {
   const [x, setX] = useState(false);
   const ref = useRef();
   ref.current = x;

// On initial render
useEffect(() => {
   props.jQueryButton.addEventListener('click', onXSave)
}, [])

useEffect(() => {
    console.log("x changed " + x); // everytime onXChange is called, x 
    state is updated with the checked value, and this console.log shows 
    the correct state value
}, [x]);

onXChange = event => {
   setX(event.target.checked); // checked is true in this context
};

onXSave = event => {
  const obj = { x: ref.current}; // by using ref, the value is always current
  };
}

Answer 2

您正在添加到eventListener的onXSave版本已过期-您只在第一次渲染时添加一次，因此当x更新并导致重新渲染时，useEffect不会再次运行，而jQueryButton仍将保留原始功能，已在过期版本的x上关闭。

你需要做两件事：

1. 添加onXSave和您的jQueryButton作为依赖项在您的use效应依赖数组中（因此，当它重新呈现时，您的函数的当前版本挂接到您的eventListener）
2. 通过从你的use效应中返回一个清理函数来删除重新呈现中的旧事件侦听器。

比如：

function MyComponent(props) {
   const [x, setX] = useState(false);

// On initial render
useEffect(() => {
   props.jQueryButton.addEventListener('click', onXSave)
   return ()=> props.jQueryButton.removeEventListener('click', onXSave)
}, [onXSave, props.jQueryButton])

useEffect(() => {
    console.log("x changed " + x); // everytime onXChange is called, x 
    state is updated with the checked value, and this console.log shows 
    the correct state value
}, [x]);

onXChange = event => {
   setX(event.target.checked); // checked is true in this context
};

onXSave = event => {
  const obj = { x: x}; // x is false here, even though the state in this context shows it to be true.
  };


}