Reactjs 在setInterval内使用带有挂钩的ref作出反应

我正在处理此组件，无法找到使

scrollViewRef

在

setInterval

内部工作的方法。我尝试过使用

scrollViewRef

和

scrollViewRef。current

两者都使用，但gives undefined不是对象。我认为在按下

on后可以看到as modal，因此
scrollViewRef
不会在
setInterval
内更新

   const App = () => {
    let interval;
    let scrollViewRef = useRef(null);
    const imageRef = useRef(null);
    const [x, setX] = useState(1);
    const [modalVisible, setModalVisible] = useState(false);
    const [top, setTop] = useState('#87cefa');
    const [left, setLeft] = useState('#cdcdcd');
    const [right, setRight] = useState('#cdcdcd');
    const [bottom, setBottom] = useState('#cdcdcd');
    const [imageSize, setImageSize] = useState({});

    useEffect(() => {
        // console.log(scrollViewRef);
        Image.getSize(
            'https://jjj.s3.ap-south-1.amazonaws.com/1/out8.jpeg',
            (width, height) => {
                setImageSize({
                    imageWidth: width,
                    imageHeignt: height,
                    quadrantSize: Math.round(width / 4),
                });
            }
        );
    }, []);

    const onBackPress = () => {
        clearInterval(interval);
        // SoundPlayer.stop();
        setModalVisible(false);
        setX(1);
        setTop('#87cefa');
        setLeft('#cdcdcd');
    };

    const onPress = () => {
        setModalVisible(true);
        // SoundPlayer.playSoundFile('aaa', 'mp3');

        interval = setInterval(() => {
            scroll(x);
        }, 50);
    };

    const scroll = (x) => {
        const quadrantSize2 = imageSize.quadrantSize * 2;
        const quadrantSize3 = imageSize.quadrantSize * 3;
        const quadrantSize4 = imageSize.quadrantSize * 4;
        // countRef.current.scrollTo({ x: 8, animated: true });
        setTimeout(() => {
            console.log('uhuihiuh');
            scrollViewRef.current.scrollTo({ x: 8, animated: true });
        }, 50);
        if (x === imageSize.imageWidth) {
            clearInterval(interval);
            setTimeout(() => {
                onBackPress();
            }, 1000);
        } else {
            setX(x + 1);
        }
        if (x <= imageSize.quadrantSize && x >= 1) {
            setTop('#87cefa');
            setLeft('#cdcdcd');
        } else if (x >= imageSize.quadrantSize && x <= quadrantSize2) {
            setRight('#87cefa');
            setTop('#cdcdcd');
        } else if (x >= quadrantSize2 && x <= quadrantSize3) {
            setBottom('#87cefa');
            setRight('#cdcdcd');
        } else if (x >= quadrantSize3 && x <= quadrantSize4) {
            setLeft('#87cefa');
            setBottom('#cdcdcd');
        }
    };

    return (
        <SafeAreaView style={styles.container}>
            <TouchableOpacity
                onPress={() => onPress()}
                style={{
                    ...
                }}
            >
                <View
                    style={{
                        ...
                    }}
                />
            </TouchableOpacity>
            <Image
                ref={imageRef}
                style={{
                    width: imageSize.imageWidth,
                    height: imageSize.imageHeignt,
                    justifyContent: 'center',
                    marginTop: 20,
                }}
                source={{
                    uri:
                        'https://jjj.s3.ap-south-1.amazonaws.com/1/out8.jpeg',
                }}
                resizeMode="cover"
            />
            <Modal
                animationType="none"
                transparent={true}
                visible={modalVisible}
                onRequestClose={() => {
                    console.log('aaa');
                }}
            >
                <View style={{ ...styles.centeredView, borderWidth: 1 }}>
                    <View style={styles.modalView}>
                        <ScrollView
                            scrollToOverflowEnabled={true}
                            horizontal={true}
                            ref={scrollViewRef}
                        >
                            <Image
                                style={{
                                    height: imageSize.imageHeignt,
                                    width: 1550,
                                }}
                                source={{
                                    uri:
                                        'https://jjj.s3.ap-south-1.amazonaws.com/1/out8.jpeg',
                                }}
                            />
                        </ScrollView>
                    </View>
                </View>
            </Modal>
        </SafeAreaView>
    );
    };

    export default App;

const-App=（）=>{
让间隔；
让scrollViewRef=useRef（null）；
const imageRef=useRef（null）；
const[x，setX]=useState（1）；
const[modalVisible，setModalVisible]=使用状态（false）；
const[top，setTop]=useState（'#87cefa'）；
const[left，setLeft]=useState（'#cdcdcd'）；
const[right，setRight]=useState（“#cdcdcd”）；
const[bottom，setBottom]=useState（“#cdcdcd”）；
const[imageSize，setImageSize]=useState（{}）；
useffect（（）=>{
//console.log（scrollViewRef）；
Image.getSize(
'https://jjj.s3.ap-south-1.amazonaws.com/1/out8.jpeg',
（宽度、高度）=>{
设置图像大小({
imageWidth:width，
图像高度：高度，
象限大小：数学圆形（宽度/4），
});
}
);
}, []);
const onBackPress=（）=>{
间隔时间；
//SoundPlayer.stop（）；
setModalVisible（假）；
setX（1）；
setTop（“#87cefa”）；
setLeft（“#cdcdcd”）；
};
const onPress=（）=>{
setModalVisible（真）；
//播放声音文件（'aaa'，'mp3'）；
间隔=设置间隔（（）=>{
卷轴（x）；
}, 50);
};
常量滚动=（x）=>{
const quadrantSize2=imageSize.quadrantSize*2；
常量quadrantSize3=imageSize.quadrantSize*3；
const quadrantSize4=imageSize.quadrantSize*4；
//countRef.current.scrollTo（{x:8，动画：true}）；
设置超时（（）=>{
控制台日志（'uhuihiuh'）；
scrollViewRef.current.scrollTo（{x:8，动画：true}）；
}, 50);
如果（x==imageSize.imageWidth）{
间隔时间；
设置超时（（）=>{
onBackPress（）；
}, 1000);
}否则{
setX（x+1）；
}
如果（x=1）{
setTop（“#87cefa”）；
setLeft（“#cdcdcd”）；
}如果（x>=imageSize.quadrantSize&&x=quadrantSize2&&x=quadrantSize3&&x），则为else
{
console.log（'aaa'）；
}}
>
);
};
导出默认应用程序；

我也试着理解这一点：
scrollViewRef
不能未定义，只有
scrollViewRef.current
可以为空。在这里，我怀疑您的模态在显示之前不会呈现其子级（因此也不会呈现与scrollViewRef相关的组件），因此
scrollViewRef.current
为空。第二件事，
interval
变量在渲染之间丢失，因此您可能也需要使用
useRef
。如果您想简化此行为：为您的模态子组件创建一个组件，并将scrollView的逻辑（钩子）移动到那里，它应该更容易管理，因为您不需要依赖
setTimeout
。我目前正在使用基于类的子组件来管理它，但想知道如何使用钩子来管理它。