0
121
Vistasindexación entre estados en reaccionar
Estoy tratando de crear un detector de eventos que proporcione datos al componente secundario.
tengo dos estados
[data,setData]=useState([]) [playData,setPlayData]= useState([])Obtengo datos de una API usando fetch y UseEffect con el parámetro [] para usarlos solo cuando se inicia la aplicación
fetch(API_URL) .then(res=>res.json) .then(data=>setData(data))en el componente de la aplicación tengo un componente de niños que recibe los datos de reproducción y una función de escucha de eventos
<Children data={playData} click={getDataOnClick} />ahora quiero que este detector de eventos envíe datos de los datos como prop uno por uno a medida que se hace clic, como siguiente, siguiente, siguiente ... hasta que se agoten los datos
entonces lo que hago es definir
const box = datay use
function getDataOnClick (event){ setPlaydata(prevdata=>{ return [...prevdata,box[prevdata.length+1]] }}Recibo un error: el cuadro no es iterable o similar cuando intento abrirlo con otros métodos de matriz. Veo que los métodos de matriz no funcionan al iterar sobre los estados, ¿supongo? ¿¿Cómo puedo solucionar esto?? ¿Hay un gancho que me falta aquí? Además, Slice no funciona con el estado y los objetos que he hecho iguales al estado.
1 Respuestas
Responde la pregunta0
Solo tiene que usar prevdata.length en lugar de prevdata.length + 1 o, de lo contrario, se saltará un elemento. Y puede verificar si playData tiene todos los elementos que están en data antes de presionar más.
Creé una caja de arena que hace lo que estás tratando de hacer.
function Child({ onNext, playData }) { return ( <div> <p>{playData}</p> <button onClick={onNext}>Next</button> </div> ); } export default function App() { const [data, setData] = useState([]); const [playData, setPlayData] = useState([]); useEffect(() => { const fakePromise = Promise.resolve( Array(50) .fill() .map((_, i) => i) ); (async () => { setData(await fakePromise); })(); }, []); const onNext = () => { setPlayData((prev) => data.length === prev.length ? prev : [...prev, data[prev.length]] ); }; return ( <div className="App"> <Child playData={playData} onNext={onNext} /> </div> ); }