0

Qué está mal para que no funcione esto?

Tengo este array de objetos

const videos = [
        { created: "", duration: 0 },
        { created: "", duration: 2 },
        { created: "", duration: 1 },
        { created: "", duration: 4 },
        { created: "", duration: 6 },
        { created: "", duration: -2 }
]

Quiero ordenarlos por filtros, ahora mismo solo por duracion, ascendente o descendente.

Este es el código que tengo con typescript:

Componente VideoList

/* COMPONENTS */
import InputSelect from "../Input/InputSelect";
import styles from "./VideoList.module.scss";

/* UTILS & HOOKS */
import { useEffect, useState } from "react";

/* INTERFACES */
// Formato de fecha temporal: 'dd-MM-YYTHH:mm'
interface IVideo {
  created: string;
  duration: number;
}

interface VideoListProps {
  title: string;
  videos: IVideo[];
}

const VideoList = ({ title, videos }: VideoListProps) => {
  const [filterSelected, setFilterSelected] = useState<string>("");
  const [sortedVideos, setSortedVideos] = useState<IVideo[]>([]);

  const options = [
    "Por fecha - creciente",
    "Por fecha - decreciente",
    "Por duración - creciente",
    "Por duración - decreciente",
  ];

  const sortByFilter = (filter: string, videos: IVideo[]): IVideo[] => {
    switch (filter) {
      case options[2]:
        return [...videos.sort((a, b) => a.duration + b.duration)];
      case options[3]:
        return [...videos.sort((a, b) => a.duration - b.duration)];
      default:
        return [{ created: "", duration: 10000 }];
    }
  };

  console.log('er')

  const handleFilterChange = (e: any) => {
    e.preventDefault();
    setFilterSelected(e.target.value);
    setSortedVideos(sortByFilter(filterSelected, videos));
  };

  return (
    <>
      <h4>{title}</h4>
      <section className={styles.videolist_section}>
        <InputSelect
          name={"filter"}
          title={"Ordenar por"}
          label={*El nombre de la opción*}
          options={options}
          onChange={handleFilterChange}
          optional={true}
        />
        <h3>{filterSelected}</h3>
        {sortedVideos.length > 0
          ? sortedVideos.map((video) => {
              return <h1 key={video.duration}>{video.duration}</h1>;
            })
          : videos.map((video) => {
              <h3>{video.duration}</h3>;
            })}
      </section>
    </>
  );
};

export default VideoList;

Sin más, lo que hace es que cada vez que cambia la selección del input, actualiza el estado de filterSelected y en base a este reordena el array videosSorted. Bien pues no funciona correctamente, primero que el algoritmo de ordenación no da lo que debe dar, no entiendo por qué, y luego la renderización no se hace correctamente, y creo que la actualización de los estados tampoco.

¿Alguna idea de qué le puede pasar o cómo arreglarlo?

2 respuestas 2

0

Con respecto al algoritmo de ordenación, debería ser:

[...videos.sort((a, b) => a.duration - b.duration)]
//...Para ordenar de forma ascendente

Y

[...videos.sort((a, b) => b.duration - a.duration)]
//...Para ordenar de forma descendente
2
  • Gracias por tu aporte, el problema no es el algoritmo de ordenación, si no que no se renderiza el array bien, y pienso que es porque no se actualizan los estados o se hacen de forma asíncrona, y no sé cómo ponerle solución
    – lRetro
    Commented el 12 may. 2022 a las 23:09
  • @lRetro Tu pregunta dice "primero que el algoritmo de ordenación no da lo que debe dar". Y te garantizo que así como está en tu pregunta no funciona. Lo que tienes en el case para la opción "Por duración - decreciente" de hecho ordena de forma creciente. Y lo que tienes en el case de "Por duración - creciente" es simplemente incorrecto. Commented el 12 may. 2022 a las 23:14
0

El problema está en en el spread operator, estas sin querer, mutando el estado original y en react eso no está permitido. Solo se permite a través del los set de los useState o con un setState en su defecto. Podrías realizar lo siguiente y avisarnos como te va:

const [sortedVideos, setSortedVideos] = useState<IVideo[]>(videos);

 const sortByFilter = (filter: string): IVideo[] => {
    switch (filter) {
      case options[2]:
        return [...sortedVideos.sort((a, b) => a.duration + b.duration)];
      case options[3]:
        return [...sortedVideos.sort((a, b) => a.duration - b.duration)];
      default:
        return [{ created: "", duration: 10000 }];
    }
  };
2
  • Hola, gracias por tu aporte, con este cambio directamente no produce ninguna ordenación, en todos los casos entra por el caso default
    – lRetro
    Commented el 13 may. 2022 a las 8:01
  • Bien, vamos a ir paso por paso entonces antes. que pasa si antes del switch haces un console.log(filter, filter === options[2], filter === [options3]), por que me suene que si siempre entra al default no está acertando dentro del switch Commented el 13 may. 2022 a las 13:04

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.