import { useEffect, useState } from "react"; import { v4 as uuidv4 } from 'uuid'; interface Item { id: string, value: number } function App() { const [list, setList] = useState<Item[]>([]); useEffect(() => { console.log(list); }, [list]) function createItem() { const id = uuidv4(); setList([...list, { id: id, value: 1 }]); return id; } function updateItem(index: number, value: number) { var newArray = [...list]; newArray[index].value = value; setList(newArray); } async function process() { const id = createItem() const index = list.findIndex(item => item.id === id); // Error starts here because list is empty (?) await new Promise((resolve) => setTimeout(resolve, Math.floor(Math.random() * 10000))); updateItem(index, 2); await new Promise((resolve) => setTimeout(resolve, Math.floor(Math.random() * 10000))); updateItem(index, 3) await new Promise((resolve) => setTimeout(resolve, Math.floor(Math.random() * 10000))); updateItem(index, 4) await new Promise((resolve) => setTimeout(resolve, Math.floor(Math.random() * 10000))); updateItem(index, 5) await new Promise((resolve) => setTimeout(resolve, Math.floor(Math.random() * 10000))); } return ( <div className="App"> <button onClick={() => { process(); }}>Create</button> {list.map((item) => { return <p key={item.id}>{item.value}</p> })} </div> ); } export default App;Estoy tratando de hacer algo como una matriz con estado, pero todos los elementos de la matriz deben actualizar su propio estado individualmente.
Supongamos: el usuario hace clic en crear, aparece un nuevo número en la pantalla a partir de 1. Se incrementa cada x segundos. Cuando el usuario vuelve a hacer clic en Crear, se aplica lo mismo para el número recién creado, pero el número anterior también debe continuar incrementándose. Supongamos que el usuario hizo clic en Crear 100 veces, todos los números deberían administrar su propio estado y debería mostrarlo en la pantalla.
Pero cuando uso el código anterior, da un error justo después de intentar encontrar index. Hubo un tiempo en que funcionó, pero luego los elementos anulaban el estado de los demás debido a [... lista, elemento]. Probablemente se deba a que los creados anteriormente no conocen los nuevos.
Estoy totalmente confundido. Solo quiero tener una matriz con estado donde todos los elementos actualicen individualmente su propio estado.
Una solución alternativa es crear un nuevo componente para Item y hacer que almacene/actualice sus propios datos, pero necesito hacer esto sin crear un nuevo componente.
Tuve que refactorizar su código principalmente por las siguientes razones.
Aquí:
const id = createItem() const index = list.findIndex(item => item.id === id); Cuando agrega un elemento a la list dentro de createItem , no está disponible de inmediato en la lista donde intenta hacer findIndex .
Además, en cualquier lugar donde esté usando setState ahora es mejor usar la forma funcional para obtener acceso al estado anterior.
Revisa el código:
export default function App() { const [list, setList] = React.useState([]); React.useEffect(() => { console.log(list); }, [list]); function createItem() { const id = uuidv4(); setList((ps) => [...ps, { id, value: 1 }]); return id; } function updateItem(id, value) { setList((ps) => ps.map((x) => (x.id === id ? { ...x, value } : x))); } async function process() { const id = createItem(); for (let i = 2; i <= 5; i++) { await new Promise((resolve) => setTimeout(resolve, Math.floor(Math.random() * 10000)) ); updateItem(id, i); } } return ( <div className="App"> <button onClick={() => { process(); }} > Create </button> {list.map((item) => { return <p key={item.id}>{item.value}</p>; })} </div> ); }