如何让 lodash orderBy 使用 React 中的 select 元素对项目列表进行排序？

Question

我正在尝试使用选择元素将内部状态设置为“升序”或“降序”。设置状态后，我想使用该状态值通过 lodash 包中的 orderBy 有条件地对 A-Z 或 Z-A 进行排序。我知道排序方法有效，因为我已经控制台记录了它们，但由于某种原因，我的 handleSort 函数根本没有对我的项目数组进行排序。

这是我的代码：

import { useState } from "react";
import { orderBy } from "lodash";

const Subjects = () => {
  const { data } = useQuery(GET_SUBJECTS);
  const [sortState, setSortState] = useState("-");

  let sortedSubjects = data.subjects;

  const handleSort = (e) => {
    setSortState(e.target.value);

    if (sortState === "ascending") {
      sortedSubjects = orderBy(data.subjects, "name", "asc");
    } else if (sortState === "descending") {
      sortedSubjects = orderBy(data.subjects, "name", "desc");
    }
  };

  return (
    <>
      <select
        onChange={handleSort}
        defaultValue="default"
        className="home-page-filter"
      >
        <option value="default">-</option>
        <option value="ascending">A-Z</option>
        <option value="descending">Z-A</option>
      </select>
      <h2>Subject</h2>
      
      <div className="subjects-container">
        {sortedSubjects.map((subject) => (
          <SubjectRow key={subject.id} subject={subject} />
        ))}
      </div>
    </>
  );
};

export default Subjects;

我尝试将排序函数直接放入 JSX 中，想知道这是否是某种提升问题。我仍然是一名初级开发人员，所以这可能是一些非常简单且有些明显的事情，我在这里遗漏或做错了。谢谢您的帮助！

Answer 1

sortedSubjects

使用

data

和

sortState

计算。这意味着您需要在每次渲染时计算它。

计算

sortedSubjects

每个组件的主体。每当组件被重新渲染时，它就会被重新计算。如果您想避免在每个渲染上执行此操作，请用

useMemo

将其包裹起来。

此外，请使用

asc

和

desc

作为选项值，这会稍微缩短代码（请参阅代码中的注释）。

因为你有数组 (

data

) 和

sortState

const Subjects = () => {
  const { data } = useQuery(GET_SUBJECTS);
  const [sortState, setSortState] = useState("default");
  
  // compute sortedSubject whenever data.subjects or sortState changes
  const sortedSubjects = useMemo(() => 
    sortState === "default" 
    ? data.subjects // return unsort if deafult
    : orderBy(data.subjects, "name", sortState) // sort by sortState
  , [data.subjects, sortState]);

  const handleSort = (e) => {
    setSortState(e.target.value);
  };

  return (
    <>
      <select
        onChange={handleSort}
        defaultValue="default"
        className="home-page-filter"
      >
        <option value="default">-</option>

        {/* change the values to asc/desc */}
        <option value="asc">A-Z</option>
        <option value="desc">Z-A</option>
      </select>
      <h2>Subject</h2>
      
      <div className="subjects-container">
        {sortedSubjects.map((subject) => (
          <SubjectRow key={subject.id} subject={subject} />
        ))}
      </div>
    </>
  );
};

Answer 2

从handleSort中删除if块，并将选项值更改为

asc

和

desc

    const [sortState, setSortState] = useState("default");
    
    const sortedSubjects = orderBy(data.subjects, "name", sortState)
    
    const handleSort = (e) => {
      setSortState(e.target.value);
    };