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

您要添加到onXSave的{{1}}的版本已过时-您只能在第一个渲染中添加一次，因此，eventListener会更新并导致重新生成-render，您的useEffect不会再次运行，并且您的x仍将保留原始功能，该功能已关闭了jQueryButton的过期版本。

您需要做两件事：

在您的x依赖项数组中添加onXSave和您的jQueryButton作为依赖项（因此，在重新渲染时，函数的当前版本将挂接到您的eventListener上）
通过从您的useEffect返回清除函数，在重新渲染时删除旧的事件侦听器。

类似这样：

useEffect

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

2 个答案: