如何在React中用select元素配合Lodash orderBy排序列表？

核心问题 #

1. setState异步特性导致逻辑失效：React的setState是异步更新的，你在handleSort里调用setSortState后立刻读取sortState，拿到的还是更新前的旧值，排序判断逻辑根本不会触发。
2. 局部变量无法持久化状态：sortedSubjects是普通局部变量，组件每次重新渲染时都会被重置为data.subjects，就算你在handleSort里修改了它，组件重新渲染后又会变回原始数据。
3. 未处理数据加载状态：useQuery返回的data可能在初始渲染时为undefined，直接访问data.subjects会触发报错。

修正后的代码 #

import { useState } from "react";
import { orderBy } from "lodash";
import { useQuery } from "@apollo/client"; // 根据你的实际查询库调整

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

  // 渲染阶段根据当前sortState计算排序结果
  let sortedSubjects = [];
  if (data?.subjects) {
    switch (sortState) {
      case "ascending":
        sortedSubjects = orderBy(data.subjects, "name", "asc");
        break;
      case "descending":
        sortedSubjects = orderBy(data.subjects, "name", "desc");
        break;
      default:
        sortedSubjects = data.subjects;
    }
  }

  const handleSort = (e) => {
    // 仅负责更新状态，排序逻辑交给渲染阶段处理
    setSortState(e.target.value);
  };

  // 处理加载/错误状态
  if (loading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error.message}</div>;

  return (
    <>
      <select
        onChange={handleSort}
        value={sortState} // 用状态控制选中值，实现受控组件
        className="home-page-filter"
      >
        <option value="-">-</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;

关键改动说明 #

• 将排序逻辑移至渲染阶段：每次组件渲染时，根据当前最新的sortState重新计算排序后的数组，确保状态更新后能立刻反映到界面上。
• 改为受控组件：用sortState作为select的value，保证选中状态和内部状态完全一致，避免非受控组件可能出现的状态不一致问题。
• 增加状态容错处理：通过loading/error状态处理数据加载过程，用可选链data?.subjects防止数据未就绪时的报错。

内容的提问来源于stack exchange，提问作者jonteal