React ref 不会在异步集上更新

【问题标题】：React ref doesn't update on async setReact ref 不会在异步集上更新
【发布时间】：2021-06-09 07:25:50
【问题描述】：

谁能告诉我为什么 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>
  );

Codesandbox

【问题讨论】：

标签： reactjs asynchronous ref

【解决方案1】：

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

如果您跟踪 ref.current，您将看到 useEffect 被执行。

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

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

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

DEMO sandbox

【讨论】：

使用值作为依赖会得到我期望的结果。感谢您的快速回复:)