首页 > 解决方案 > 通过函数使用 useEffect 设置状态

问题描述

我知道如果在函数中使用 useEffect 会出错。但是,如果我想在函数内部或满足某些条件后更新状态变量,并同时更新 DOM 或其在 DOM 上看到的值。最好的方法是什么?

示例代码:

    const handleClick = () => {

    const newDiff = (Date.now() - startTime);
    console.log('newDiff: ' + newDiff)

    setDiff(newDiff);
    console.log('diff: ' + diff)
    
    setDiffArray(oldArray => [...oldArray, newDiff]);
    console.log("diffArray: " + diffArray)

    if (newDiff !== undefined) {
    if (diffArray !== undefined && diffArray.length >= 5){
      gameReset();
    }
    console.log(diffArray);
  }
    setStartTime(Date.now());
    respawn();
    console.log(diffArray);
  }

为了给你一些上下文,newDiff在单击 div 后生成,在它设置为 state using 后立即生成setDiffArray,我尝试<div>在所有计算完成后将其渲染为 a,但状态仍然落后于渲染,因此最后一个 div不记录并保存到阵列中。

如果我尝试使用 useEffect,我会收到无法在函数内部使用它的错误。

标签: reactjsuse-state

解决方案


推荐阅读