Question

我有下一个组件：

import React, { useState, useEffect, useRef } from "react";
import { View, Text, StyleSheet, Button } from "react-native";

const ClientComponent = (props) => {
    const { style, elements } = props;

    const index = useRef(0);
    const elementWaitTime = useRef(elements[index.current]);
    const [currentElement, setCurrentElement] = useState(elements[0]);

    const handleChange = (e) => {
        if (index.current === elements.length - 1) {
            elementWaitTime.current = elements[0];
            setCurrentElement(elements[0]);
            index.current = 0;
        } else {
            elementWaitTime.current = elements[index.current + 1];
            setCurrentElement(elements[index.current + 1]);
            index.current = index.current + 1;
        }
    };

    useEffect(() => {
        const timeout = setInterval(() => {
            console.log(
                `Waiting for ${
                    elementWaitTime.current.transitionTime * 1000
                } seconds.`
            );
            handleChange();
        }, elementWaitTime.current.transitionTime * 1000);

        return () => {
            clearInterval(interval);
        };
    }, []);

    return (
        <View style={style}>
            <Text style={styles.text}>{currentElement.elementSource}</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    text: {
        color: "#FFF",
        fontSize: 18,
        fontWeight: "bold",
    },
});

export default ClientComponent;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我正在尝试根据以下元素创建手动幻灯片：文本、图像和视频。每个元素都有一个过渡时间，基于此我想在“自动播放”上显示不同的元素。

我的问题是，尽管我正在更改当前的 transitionTime，但我的时间间隔不会改变。

另一个问题是我等待的 transitionTime 是针对前一个元素的，而不是当前元素。

感谢您的帮助！

使用不同的间隔在 useEffect 内反应原生 setInterval

0 个答案: