Estoy trabajando en este componente de reacción. Quiero que modifique una matriz usando un bucle y refleje los cambios en la interfaz de usuario después de cada iteración. También agregué un código para detener el programa para que cada iteración se muestre por un corto tiempo.
En cuanto a la interfaz de usuario, tengo los números en la matriz seguidos de un botón para iniciar el ciclo. Parece que después de presionar el botón, la interfaz de usuario simplemente se congela y se muestra la matriz, pero solo después de la última iteración del bucle. Quiero que la matriz en pantalla cambie después de cada iteración de bucle. Intenté usar this.forceUpdate() pero no cambió nada. También intenté usar el operador de propagación (...) para cambiar el estado, pero eso tampoco cambió nada. El código relevante y el GitHub se pegan a continuación. El código se puede encontrar en src/ChangingArray.js en los archivos del proyecto. Gracias por adelantado.
import React, { Component } from 'react' export default class ChangingArray extends Component { constructor(props) { super(props); this.state = { array: [1, 2, 3] } this.modifyArray = this.modifyArray.bind(this); } modifyArray = () => { for (let i = 0; i < 15; i++) { let newArray = []; for (let j = 0; j < this.state.array.length; j++) { newArray[j] = this.state.array[j]; } newArray[i % newArray.length] = i; this.setState({ array: [...newArray], }) this.forceUpdate(); //Code to halt the program const date = Date.now(); let currentDate = null; do { currentDate = Date.now(); } while (currentDate - date < 250); } } render() { return ( <div> {this.state.array} <button onClick={this.modifyArray}>modify</button> </div> ) } }https://github.com/AntonM-248/longestPalindromicSubstringVisualizer
Haciendo
do { currentDate = Date.now(); } while (currentDate - date < 250);está bloqueando el hilo sincrónicamente, por lo que su interfaz de usuario obviamente se congelará:
No estoy seguro de haber entendido lo que está tratando de lograr, pero si desea bloquear la ejecución de un ciclo por un tiempo antes de pasar al siguiente ciclo, necesita implementar un iterador asíncrono, permítame mostrarle cómo:
function makeAsyncArray(arr, delay) { return { [Symbol.asyncIterator]() { let i = 0; return { next() { const done = i === arr.length; const value = done ? undefined : arr[i]; i++; return new Promise((res) => setTimeout(() => res({ value, done }), delay) ); }, return() { // This will be reached if the consumer called 'break' or 'return' early in the loop. return { done: true }; }, }; }, }; }Esta función devuelve un objeto especial llamado Async Iterator , este tipo de iteradores se pueden iterar usando esta sintaxis:
for await (const el of arr) //do something Cada elemento devuelto por este iterador es una Promise , por lo que puede esperarse dentro de una async function y eso es lo que necesitamos si queremos hacer bucles retrasados que esperen algo antes de continuar con el ciclo. En este ejemplo, usé solo un retraso con setTimeout para producir y bloquear el bucle de forma asíncrona durante algún tiempo, pero puede usar esta lógica para resolver esa Promesa con cualquier otra lógica asíncrona (por ejemplo, el resultado de una solicitud de búsqueda).
Esta es una implementación React funcional de esta lógica:
const arr = makeAsyncArray([1, 2, 3, 4, 5,6,7,8,9,10], 1000); export default function App() { const [data, setData] = useState([]); // Data array will be populated adding one element every 1000ms since we have initialized the async iterator to resolve after 1000ms useEffect(() => { (async () => { for await (const el of arr) { setData((d) => [...d, el]); } })(); }, []); return <div>{data}</div>; } function makeAsyncArray(arr, delay) { return { [Symbol.asyncIterator]() { let i = 0; return { next() { const done = i === arr.length - 1; const value = done ? undefined : arr[i]; i++; return new Promise((res) => setTimeout(() => res({ value, done }), delay) ); }, return() { // This will be reached if the consumer called 'break' or 'return' early in the loop. return { done: true }; }, }; }, }; }La demostración en vivo : https://stackblitz.com/edit/react-yie8pg