时间戳

首页 > 解决方案 > React ref 不会在异步集上更新

reactjs - React ref 不会在异步集上更新

问题描述

谁能告诉我为什么 ref 在初始渲染时没有更新？

我在最后一项上有条件地设置 ref，如果我不将值设置为异步，它可以正常工作。

const [values, setValues] = useState<Array<Number>>([]);
  const ref = useRef(null);

  useEffect(() => {
    console.log(ref.current);
  }, [ref]);

  useEffect(() => {
    setTimeout(() => {
      const newValues = Array(10)
        .fill(0)
        .map((item) => Math.random());
      setValues(newValues);
    }, 1000);
  }, []);

  return (
    <div className="App">
      {values.map((value, index) => {
        const isLast = index === values.length - 1;
        return (
          <div key={value.toString()} {...(isLast && { ref: ref })}>
            {value}
          </div>
        );
      })}
    </div>
  );

代码沙盒

标签： reactjsasynchronousref

解决方案

ref填充异步时看不到执行依赖的 useEffect 的values原因是 ref 实例保持不变，但 ref 对象中的当前键已被修改。

如果你跟踪ref.current，你会看到useEffect被执行。

  useEffect(() => {
    console.log(ref.current);
  }, [ref.current]);

但是，这不是正确的方法，因为 ref 的更改不会触发重新渲染，并且useEffect称为重新渲染后。相反，您应该依赖于 useEffect 的依赖项是值的变化，这实际上会导致 ref 发生变化

  useEffect(() => {
    console.log(ref.current);
  }, [values]);

演示沙盒

推荐阅读