React ref 不会在异步集上更新

Question

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

Answer 1

当你填充 values async 时你看不到 useEffect with dependency as ref 执行的原因是因为 ref 实例保持不变但 ref 对象中的当前键被修改.

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

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

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

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

DEMO sandbox

React ref 不会在异步集上更新

React ref doesn't update on async set

reactjs

asynchronous

ref