1

Cordial saludo, este es una pequeña app con react, cada ves que hago clic en el boto next se muestra un elemento diferente del data (variable descrita en el código), pero necesito que cada ves que muestro un elemento este se elimine de la data, intente con filter y si me elimina el elemento pero solo el primero los siguientes no los va eliminando, el json tiene 102 elementos, elimina la primera ves pero después siempre se queda en 101 en cada clic.

la pregunta es como puedo ir teniendo una data que no contenga en cada clic elemento que va mostrando. Muchas gracias.

este es el json https://gist.github.com/carmandomx/3d7ac5f15af87a587e1d25f5ba96de61



import React, { useEffect, useState } from "react";
import quotes from "../quotes.json"


export default function QuoteBox(props) {
    let randomNumber;
    let data = quotes["quotes"];// esta variable guarda el objeto de JSON para poder iterarlo a futuro.
    const [quote, setQuote] = useState(data[0]); // El primer quote que se mostrara estará en el primer estado y este
    //sera el primero del archivo Json.


    function change() {

        //usar esta formula para determinar un número aleatorio entre 0 hasta el total del Json a recorrer "Math.random() * (max - min) + min"
        randomNumber = Math.floor(Math.random() * ((data.length - 1) - 0) + 0)
        setQuote(data[randomNumber]) // actualizamos el valos del estado
        console.log(data[randomNumber]);

         let newData = data.filter(elem => data[randomNumber].author !== elem.author)
        data = newData;
        console.log(data);
    }




    return (
        <div>
            <h2>Author</h2>
            <h1>{quote.author}</h1>
            <span>{quote.quote}</span>

            <div>
                <button onClick={() => change()}>Next</button>
            </div>
        </div>
    )
}

1 respuesta 1

0

No parece estar mal la lógica de tu codigo. Pero debes entender como opera react... cada vez que se ejecuta el setState se renderiza todo el componente y también el let data se inicializa con el json.

Paso 1. Como usas el data para inicializar el estado, saca del componente una const dataInicial

Paso 2. Tienes 2 opciones... convertir data en otro estado. O usar useRef para iniciar data.

Tu decides.

2
  • tenía razón usando otros useState me permite hacerlo, ósea sin trabajar en variable sino con state. Commented el 26 jun. 2021 a las 9:10
  • No se bien como va a escalar ese componente que está creando. No se para qué desea que mute ese array data. Pero yo dejaría el data como constante y el state que usaría seria un index que recorra todo el array y que cambie con el onclick. Suerte Commented el 26 jun. 2021 a las 11:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.