调用 document.onpaste 后更新 React 状态？

Question

我正在尝试设置一个功能组件，允许用户将剪贴板图像复制/粘贴到应用程序中。在 useEffect 中，我设置了 document.onpaste 。这是有效的，我能够获取图像并上传它。但是我需要让它在粘贴后更新状态，这样我就可以允许他们粘贴多个图像并将它们保持在数组中。

我已经简化了下面的问题。基本上，当我粘贴时，我想让它更新计数器值，但它没有。计数器总是 = 0。如果我使用正常的反应按钮 onclick 事件，它工作正常。我猜 onpaste 事件在 React 之外，但是，

如何处理粘贴事件并更新功能状态？

import React, { useEffect, useState } from 'react';

const AddAttachmentsContainer = ({ zoneid, tableid, field }) => {
  const [counter,setCounter]=useState(0);

  useEffect(() => {
    document.onpaste=(e)=>{GetImage(e);e.preventDefault()}
  },[])

  const GetImage = (e) => {
    setCounter(counter+1)
    console.log(counter)
  }
 }

Answer 1

如果我没记错的话，我敢打赌状态已经更新。 useState 将更新状态并触发重新渲染。由于它是异步的，console.log 将使用旧状态值调用。

useEffect(() => console.log(counter), [counter]);

...不要忘记在useEffect 的第二个参数中添加counter。 see here...

另见here

当然，您也可以使用refs，但请注意它们的用例。很容易让 ref 不必要地在您的代码中传播。

说实话，在你已经拥有的useEffect 中只使用setCounter 并在之后调用你的GetImage 函数可能是明智之举......从那里，你可以检索计数器。有多种方法可以解决此问题。