1
<div className=" row pt-3 pr-3 pl-3 ">  { 
        shuffleArray(array).map((respuestasv)=>(
            <div key={respuestasv.id} className="col-md-6  ">
                <button type="button" 
                    onClick={(e) =>handleClickedVideo(e,respuestasv)}
                    className="btn btn-block btn-light btn-sm mb-4"
                    >{respuestasv.name } </button>
            </div>
        ))}

Código de shuffleArray(a)

function shuffleArray(a) {
     console.log("hi")
    var j, x, i;
    for (i = a.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        x = a[i];
        a[i] = a[j];
        a[j] = x;
    }
    return a;
}

En mi react.js tengo un array de datos que traigo de un api y este quiero que sea reordenado aleatoriamente con el código anterior. Para ello cuento con una funcion shuffleArray(a) pero surge un problema que no lo entiendo:

Que cada vez que hago click en el botón, este llama de nuevo a shuffleArray y me reorganiza el array haciendo que se muestre los datos en diferente orden nuevamente. El comportamiento esperado es que se muestre el array desordenado que paso por shufleArray, y cuando clickee (el click se da una sola vez) sea este mismo array y que no llame otra vez a shufleArray.

Entendí que se esta haciendo un re-render por el método shuffleArray(a) por que este cambia el valor de **a** por el valor aleatorio de **a** por lo que lo vuelve a renderizar. ¿Cómo podría evitas ese comportamiento?.

2
  • Parece que se esta haciendo un re-render en handleClickedVideo, por esa razón shuffleArray se dispara nuevamente y con su respectivo nuevo ordenamiento, puede que se tenga que rediseñar la lógica de suffleArray, ¿Puedes compartir el código de handleClickedVideo?
    – g.4
    Commented el 20 jun. 2021 a las 15:55
  • handleClickedVideo tenia bastante código pero ahora lo borre todo y sigue pasando lo mismo. luego le puse event.preventDefault() y sigue haciendo lo mismo. Commented el 20 jun. 2021 a las 16:02

1 respuesta 1

1

Entendí que se esta haciendo un re-render por el método shuffleArray(a) por que este cambia el valor de a por el valor aleatorio de a por lo que lo vuelve a renderizar. ¿Cómo podría evitas ese comportamiento?

Por lo que mencionas, el array que proviene de la API siempre es el mismo; pero no quieres que se cambie el orden de este en cada llamada a handleClickedVideo, si no solo al iniciar el componente.

Suponiendo que el ejemplo que nos compartes presenta el siguiente comportamiento (emulación con Post API):

function App() {
  const [posts, setPosts] = React.useState([]);
  const [rerender, setRerender] = React.useState(false);

  React.useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
      .then((data) => setPosts(data));
  }, []);


  function shuffleArray(a) {
    //console.log("hi")
    var j, x, i;
    for (i = a.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        x = a[i];
        a[i] = a[j];
        a[j] = x;
    }
    return a;
  }

  function handleClickedVideo(a,b){
    let totalErrors=[];
    //console.log("in vid");
    totalErrors.push({"error":"cuatro"})
    setRerender(totalErrors);
  }

  return (
    <div>
        {shuffleArray(posts).map((respuestasv)=>(
            <div key={respuestasv.id}>
                <button type="button" 
                    onClick={(e) =>handleClickedVideo(e,respuestasv)}
                    >{respuestasv.title } </button>
            </div>
        ))}
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

<div id="root"></div>


useMemo

Se puede usar el hook useMemo, esto con la finalidad de regresar el array memorizado, este no va a cambiar su valor en memoria, si no hasta que la dependencia que se indique cambie su valor. Se puede hacer uso de este hook pues como ya se mencionó, el array que proviene de la API siempre es el mismo; y este array se puede usar como la dependencia de useMemo.

Implementando useMemo:

function App() {
      const [posts, setPosts] = React.useState([]);
      const [rerender, setRerender] = React.useState(false);

      React.useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/posts")
          .then((res) => res.json())
          .then((data) => setPosts(data));
      }, []);


      function shuffleArray(a) {
        //console.log("hi")
        var j, x, i;
        for (i = a.length - 1; i > 0; i--) {
            j = Math.floor(Math.random() * (i + 1));
            x = a[i];
            a[i] = a[j];
            a[j] = x;
        }
        return a;
      }
      
      const memoShuffleArray = React.useMemo(()=>{
          let a = shuffleArray(posts)
          return ()=> a;
        },[posts]
      );

      function handleClickedVideo(a,b){
        let totalErrors=[];
        //console.log("in vid");
        totalErrors.push({"error":"cuatro"})
        setRerender(totalErrors);
      }

      return (
        <div>
            {memoShuffleArray().map((respuestasv)=>(
                <div key={respuestasv.id}>
                    <button type="button" 
                        onClick={(e) =>handleClickedVideo(e,respuestasv)}
                        >{respuestasv.title } </button>
                </div>
            ))}
        </div>
      );
    }

ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

<div id="root"></div>

Hook useMemo

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.