tengo un video suponga que la duración del video es de 0:10 segundos (10 segundos). También tiene una matriz de estructura de datos de matriz como [[100,100],[20,20],[50,50],[10,10],[30,30]]. En cada submatriz tiene dos valores que representan las coordenadas [x, y]. La duración de la matriz principal es igual a la duración del video. Quiero hacer eso, cada vez que inicie el video, el ciclo comienza a iterar hasta la duración del video, también itera la matriz de la matriz hasta la duración del video y guarda las coordenadas x e y en la variable de estado. Cómo puedo hacerlo. por favor dar la solución.
video length :0:05 sec array of array :[[100,100],[20,20],[50,50],[10,10],[30,30]]Puede usar una función con setTimeout . Si la segunda variable es menor que la duración del video, vuelva a llamar a la función.
La función se llama inicialmente con useEffect que se llama una vez cuando se monta el componente (matriz de dependencia vacía).
En este ejemplo práctico, mapping el estado y registro cada par de coordenadas solo para mostrar cómo funciona la salida.
const { useEffect, useState } = React; // Pass in the data to the component function Example({ videoLen, data }) { // Initialise the state with an empty array const [ coords, setCoords ] = useState([]); // The looping function uses `setTimeout`. function loop(sec = 0) { // Update the state by preserving the previous // state and adding the array stored at data[sec] to it setCoords(prev => [ ...prev, data[sec] ]); // If the sec variable is less than the // length of the video call loop again with // an incremented sec variable if (sec < +videoLen - 1) { setTimeout(loop, 1000, ++sec); } } // Call `loop` once when the component // is mounted useEffect(() => loop(), []); // `map` over each coord pair in state // and add return some JSX return ( <div> {coords.map(coord => { const [ x, y ] = coord; return <p>X: {x} Y:{y}</p>; })} </div> ); }; const data = [[100,100],[20,20],[50,50],[10,10],[30,30]]; ReactDOM.render( <Example videoLen="5" data={data} />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>