javascript - useRef对象在React/React-Native中返回未定义

尝试访问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>

当我调用以下方法时，出现错误提示


  未定义不是对象（评估
  '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)
    })
}

最佳答案

我认为问题在于索引后需要再有一个.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