我尝试在 React 中使用 ref，它是一个包含对 DOM 中多个其他 div 的引用的数组。

在 useEffect 中，我通过一个对象进行映射以呈现 div，并为每个 div 分配一个 ref。在分配 ref 之前，我使用 createRef 为其实例化一个插槽。

我本质上是在尝试复制 这个 答案建议的操作。

我遇到的问题是我的编译器一直看到 undefined 。我不确定为什么会发生这种情况，但是这是我拥有的代码：

import React from "react";

const items = [
  [1, 2, 3, 4, 5],
  [6, 7, 8, 9, 10]
];
export default function Component() {
  const [renderedItems, setRenderedItems] = React.useState();
  const [height, setHeight] = React.useState(0);
  const refsArray = React.useRef([]);

  React.useEffect(() => {
    const heightOfFirstDiv = refsArray.current[0].offsetHeight;
    console.log("heightOfFirstDiv", heightOfFirstDiv); // <-- this is always undefined
    setHeight(heightOfFirstDiv);
  }, [renderedItems]);

  React.useEffect(() => {
    setRenderedItems(
      items.map((item, index) => {
        refsArray.current[index] = React.createRef();

        return (
          <div
            ref={refsArray.current[index]}
            style={{ height: 100, width: 40 }}
          >
            {item}
          </div>
        );
      })
    );
  }, []);

  return (
    <div>
      The height is: {height || "undefined"}
      {renderedItems}
    </div>
  );
}

我在这里做错了什么？