在 React/React-Native 中返回 undefined 的 useRef 对象

Question

当我尝试访问 ref 对象时，我收到了undefined。我正在映射一组图像并尝试通过 useRef 访问单个图像。

首先，我将useRef初始化如下：

const gridImages = useRef([React.createRef(), React.createRef()])

然后是图像的映射：

<View style={styles.grid}>
    {images.map((src, index) => {
        const style = index === activeIndex ? activeIndexStyle : undefined
        return (
            <TouchableWithoutFeedback key={index} onPress={() => handleOpenImage(index)}>
                <Animated.Image 
                    source={{ uri: src }}
                    style={[ styles.gridImage, style ]}
                    ref={gridImages.current[index]}
                />
            </TouchableWithoutFeedback>
        )
    })}
</View>                

当我调用以下方法时，我收到一条错误消息

undefined 不是一个对象（评估 'gridImages.current[index].getNode')

当我console.log 对象gridImages.current 显示没有问题的方法时，但只要我包含index，我就会得到undefined 错误。

const handleOpenImage = index => {
    console.log(gridImages.current[index])
    gridImages.current[index].getNode().measure((x, y, width, height, pageX, pageY) => {
        position.setValue({
            x: pageX,
            y: pageY,
        })

        size.setValue({
            x: width,
            y: height,
        })
        setActiveImage(images[index])
        setActiveIndex(index)
    })
}

Answer 1

我认为问题在于您需要在索引后添加另一个 .current。

例如：gridImages.current[index].current，因为您同时使用 useRef 和 React.createRef

这是一个仅包含关键部分的简化代码示例（请原谅转换为 ReactDOM 而不是 React Native，但原理应该仍然相同）：

function Comp(props) {
  const { images } = props;
  const gridImages = React.useRef(images.map(_ => React.createRef()));

  const handleClick = index => {
    console.log(gridImages.current[index].current);
  };

  return (
    <div>
      {images.map((src, index) => (
        <img
          onClick={() => handleClick(index)}
          src={src}
          key={index}
          ref={gridImages.current[index]}
        />
      ))}
    </div>
  );
}

function App() {
  return (
    <Comp
      images={[
        "https://placekitten.com/100/100",
        "https://placekitten.com/101/101",
        "https://placekitten.com/102/102"
      ]}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

请注意，我还根据图像的数量将useRef 部分更新为动态的，因为这似乎是动态的，在此答案中建议：https://stackoverflow.com/a/55996413/2690790