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

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>                

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

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