更改排序時過濾不會自動作業

我正在構建一個應用程式，該應用程式具有一個可以按類別過濾并按評級排序的視頻資料庫。

更改選項后過濾作業。但是，當我更改視頻的類別時，過濾不會自動啟動。我添加了 useEffect 但我不知道我還能改變什么以及它為什么會發生。請幫助如何在更改類別時使排序不消失。

更新：

import * as _ from "lodash";
import { useEffect, useState } from "react";

import { getAllPrograms } from "../../helpers/getData";
import { TVProgram } from "../../models/models";
import Filters from "../Filters/Filters";
import ProgramsList from "../ProgramsList/ProgramsList";
import Sorting from "../Sorting/Sorting";
import "./HomePage.scss";

const HomePage = () => {
  const [programs, setPrograms] = useState<Array<TVProgram>>([]);
  const [category, setCategory] = useState<string>("movie,series");
  const [sortedPrograms, setSortedPrograms] = useState<TVProgram[]>(programs);

  const getPrograms = async (category: string) => {
    const programs = await getAllPrograms(category);
    setPrograms(programs);
  };

  useEffect(() => {
    getPrograms(category);
  }, [category]);

  const updateCategory = (categoryName: string): void => {
    setCategory(categoryName);
    console.log("catName", categoryName);
  };

  const updatePrograms = (sortedPrograms: TVProgram[]): void => {
    setSortedPrograms(sortedPrograms);
    console.log("sortedPrograms", sortedPrograms);
  };

  return (
    <div className="container">
      <div>
        <Filters
          updateCategory={updateCategory}
          currentCategory={category}
        ></Filters>
        <Sorting programs={programs} setPrograms={updatePrograms}></Sorting>
      </div>
      <ProgramsList programs={sortedPrograms}></ProgramsList>
    </div>
  );
};

export default HomePage;

import _ from "lodash";
import { ChangeEvent, useEffect, useState } from "react";
import { sortProgramsByOrder } from "../../helpers/helpers";
import { TVProgram } from "../../models/models";
import "./Sorting.scss";

interface SortingListProps {
  programs: TVProgram[];
  setPrograms: (programs: TVProgram[]) => void;
}

const Sorting = ({ programs, setPrograms }: SortingListProps) => {
  const OPTIONS = ["imdb rating descending", "imdb rating ascending"];
  const [selectedOption, setSelectedOption] = useState<string>("");
  const [sortedPrograms, setSortedPrograms] = useState<TVProgram[]>([]);

  useEffect(() => {
    if (selectedOption === OPTIONS[0]) {
      setSortedPrograms(sortProgramsByOrder(programs, "desc"));
    } else if (selectedOption === OPTIONS[1]) {
      setSortedPrograms(sortProgramsByOrder(programs, "asc"));
    }
  }, [selectedOption, programs]);

  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
    console.log();
    setSelectedOption(event.target.value);
    setPrograms(sortedPrograms);
  };

  return (
    <div>
      <select value={selectedOption} onChange={handleChange}>
        <option selected>Sortuj</option>
        {OPTIONS.map((option) => (
          <option
            key={option}
            value={option}
            selected={option === selectedOption}
          >
            {option}
          </option>
        ))}
      </select>
    </div>
  );
};

export default Sorting;

uj5u.com熱心網友回復：

useEffect()是一個鉤子，它可以防止對變數進行更新，除非在特定情況下。任何在鉤子末尾傳入陣列的變數useEffect()都會導致里面的代碼在其值發生變化時再次運行。乍一看，問題出在代碼的以下部分：

useEffect(() => {
    if (selectedOption === OPTIONS[0]) {
      sortPrograms(sortProgramsByOrder(programs, "desc"));
    } else if (selectedOption === OPTIONS[1]) {
      sortPrograms(sortProgramsByOrder(programs, "asc"));
    }
  }, [selectedOption]);

告訴鉤子僅在[selectedOption]排序順序發生變化時才進行排序。但是，如果訂單或內容發生變化，您想呼叫此鉤子。因此，您希望將此陣列替換為，[selectedOption, programs]以便更改程式變數的內容也將導致重新運行排序。

如果programs在鉤子中更新并由鉤子設定，這會導致遞回呼叫，這是不好的。相反，讓我們將顯示的值更改為一個名為 的新變數（使用 useState 定義）sortedPrograms。那么你的鉤子應該是這樣的：

useEffect(() => {
    if (selectedOption === OPTIONS[0]) {
      setSortedPrograms(sortProgramsByOrder(programs, "desc"));
    } else if (selectedOption === OPTIONS[1]) {
      setSortedPrograms(sortProgramsByOrder(programs, "asc"));
    }
  }, [selectedOption, programs]);

標籤：反应打字稿排序反应钩子过滤

上一篇：洗掉具有重復id和排序值的物件

下一篇：如何對Python字典中的專案進行排序？