如何在 useEffect 中使用 setTimeout 重置 React 钩子状态

Posted

技术标签:

【中文标题】如何在 useEffect 中使用 setTimeout 重置 React 钩子状态【英文标题】:How to reset React hook state with setTimeout in useEffect 【发布时间】:2021-03-30 01:24:07 【问题描述】:

我有一个简单的组件,它可以将链接复制到剪贴板,并且想用复选标记交换链接图标。我有这样做的逻辑设置,但是在 3 秒后重置状态以将按钮重置回链接图标时出现问题。如何正确设置我的useEffect 和状态挂钩以设置然后重置状态以显示/隐藏链接到复选标记并再次返回?

const [copySuccess, setCopySuccess] = useState('');
const [visible, setVisible] = useState(true);
const copyToClipBoard = async copyHeader => 
try 
  await navigator.clipboard.writeText(copyHeader);
    setCopySuccess('Copied!');
   catch (err) 
    setCopySuccess('Failed to copy!');
  
;

<Button>
    copySuccess ? (
       <Icon name="success" />
    ):(
     <Icon
        name="linked"
        onClick=() => copyToClipBoard(url)
     />
    )
</Button>

我正在尝试像这样的useEffect

useEffect(() => 
    setTimeout(() => 
      setVisible(false);
    , 3000);
 );
  

但不确定如何使用setVisible 状态和超时,将图标换回链接,让用户知道他们可以再次复制它。

【问题讨论】:

尝试在 useEffect 依赖数组中包含 copySuccess 作为依赖。 【参考方案1】:

我可以建议您更改异步功能以更新 visible。 然后改变你的按钮标签:

<Button>
    visible 
      ? <Icon name="success" />
      : <Icon
         name="linked"
         onClick=() => copyToClipBoard(url)
        />
    
</Button>

【讨论】:

【参考方案2】:

您可以从copySuccess 状态导出可见状态,尝试将其添加到useEffect dep 数组:

const [copySuccess, setCopySuccess] = useState("");
const copyToClipBoard = async (copyHeader) => 
  try 
    await navigator.clipboard.writeText(copyHeader);
    setCopySuccess("Copied!");
   catch (err) 
    setCopySuccess("Failed to copy!");
  
;

useEffect(() => 
  if (copySuccess !== "") 
    setTimeout(() => 
      setCopySuccess("");
    , 3000);
  
, [copySuccess]);

<Button>
  copySuccess ? (
    <Icon name="success" />
  ) : (
    <Icon name="linked" onClick=() => copyToClipBoard(url) />
  )
</Button>;

在代码框示例中查看类似的逻辑:

function Component() 
  const [copyIsAvailable, setCopyIsAvailable] = useState(true);

  useEffect(() => 
    setTimeout(() => 
      setCopyIsAvailable(true);
    , 1000);
  , [copyIsAvailable]);

  return (
    <button onClick=() => setCopyIsAvailable(false)>
      copyIsAvailable ? "copy" : "copied"
    </button>
  );

【讨论】:

以上是关于如何在 useEffect 中使用 setTimeout 重置 React 钩子状态的主要内容,如果未能解决你的问题,请参考以下文章

SetTimer如何修改间隔时钟uElapse

SetTimer如何修改间隔时钟uElapse

SetTimer如何修改间隔时钟uElapse

SetTimer如何修改间隔时钟uElapse

SetTimer如何修改间隔时钟uElapse

Console无界面程序如何使用SetTimer