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

我认为问题在于索引后需要再有一个Select-Object。

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

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

useRef

React.createRef

请注意，我还根据图像数量将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);部分更新为动态部分，因为该部分似乎按照此答案中建议的方式是动态的：https://stackoverflow.com/a/55996413/2690790

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

1 个答案: