为什么我在 useEffect 中的 setTimeout 中的 setState 没有更新我的状态？

Question

我有一个反应组件，我想在其中存储一个状态的 div 的宽度。我正在使用以下代码（从我的项目中提取）：

const Test = (): JSX.Element => {
    const ref = useRef<HTMLDivElement>(null);

    const [width, setWidth] = useState(123);

    useEffect(() => {
        setTimeout(() => {
            const width = ref.current?.clientWidth || 321;
            setWidth(() => width);
        }, 1000);
        setTimeout(() => {
            console.error(width);
        }, 2000);
    }, []);

    ...

    return (
        <div ref={ref}>Test</div>
    );
}

运行它时，在控制台中我看到打印的值123（宽度的原始值）而不是实际宽度或321。

我确信我在做一些愚蠢的事情，但我已经盯着这段代码看了很长时间了。所以，希望有人能帮忙！

（我使用setTimeout 的原因是我在某个地方读到过，如果你马上得到ref.current.clientWidth，有时你不会得到正确的值。

Answer 1

您的方法存在一些问题。

通常最好避免使用setTimeout 来等待组件渲染等动态变化。充其量，它会增加不必要的等待时间，从而使您的应用程序变得异常缓慢；并且有可能你正在等待的任何东西在 timeOut 结束时仍然没有准备好，这是 bug 的来源。

在这种情况下，您实际上并不想等待 1 秒；你想等到div 被渲染，你的代码应该反映它。

This link 详细说明了 React 推荐的问题的解决方案，包括为什么在这种情况下 useCallback 实际上比 useRef 更好。应用于您的示例，它应该如下所示：

const Test = (): JSX.Element => {
  const [width, setWidth] = useState(0);

  const ref = useCallback(node => {
    if (node !== null) {
      setWidth(node.getBoundingClientRect().width);
    }
  }, []);

    ...

    return (
        <div ref={ref}>Test</div>
    );
}