MERN栈排序无结果时下拉框异常回退问题求助

我基于MERN栈开发卡片列表功能，支持按迁徙模式和用户点赞状态排序。排序功能正常，但存在一个异常：当从默认选项「All」切换到无对应卡片的选项时，下拉框会回退显示「All」，但selectedPattern状态值仍保持用户选中的选项。这导致用户无法直接再次点击「All」查看全部卡片，必须先选其他选项才能恢复。

复现场景：

• 下拉框核心代码：

const MigrationSelect = ({ handleSelectChange }) => {
    return (
      <div>
        <div className="sort-container">
          <label htmlFor="migration-pattern-select">
            Sort by Migration Pattern:
          </label>
          <select id="migration-pattern-select" onChange={handleSelectChange}>
            <option value="">All</option>
            <option value="New Zealand to Alaska">New Zealand to Alaska</option>
            <option value="Arctic to Antarctic and Back">
              Arctic to Antarctic and Back
            </option>
            <option value="Eastern United States to Central America">
              Eastern United States to Central America
            </option>
            //...更多选项
          </select>
        </div>
      </div>
    );
};

• 选择「Arctic to Antarctic and Back」且无对应卡片时，页面正确显示「No birds currently on this path!」，但下拉框回显「All」；
• 接着选择同样无卡片的「New Zealand to Alaska」，下拉框则正常显示该选项。

UserList核心逻辑代码：

const UserList = () => {
  const { loading, error, data } = useQuery(QUERY_USERS);
  const [selectedPattern, setSelectedPattern] = useState("");
  const [showLikedBirds, setShowLikedBirds] = useState(false);
  const loggedInUserLikes = AuthService.getUserLikes();

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  const handleSelectChange = (event) => {
    setSelectedPattern(event.target.value);
  };

  const filteredUsers = selectedPattern
    ? data.users.filter((user) => user.migration === selectedPattern)
    : data.users;

  let sortedUsers = [...filteredUsers].sort((a, b) => {
    const nameA = a.birdname.toUpperCase();
    const nameB = b.birdname.toUpperCase();
    if (nameA < nameB) return -1;
    if (nameA > nameB) return 1;
    return 0;
  });

  if (showLikedBirds) {
    sortedUsers = sortedUsers.filter((user) =>
      loggedInUserLikes.some((likedUser) => likedUser._id === user._id)
    );
  }

  if (sortedUsers.length === 0) {
    return (
      <>
        <MigrationSelect handleSelectChange={handleSelectChange} />
        <button className="liked-button" onClick={handleLikedBirdsButtonClick}>
          {showLikedBirds ? "Show All Birds" : "Show Liked Birds"}
        </button>
        <h2>No birds currently on this path!</h2>
        {loggedInUserLikes === null ||
          (loggedInUserLikes.length === 0 && (
            <h2>You haven't liked any birds yet!</h2>
          ))}
      </>
    );
  }

  return (
    <>
      <div className="dash-sorting">
        <MigrationSelect handleSelectChange={handleSelectChange} />
        <button className="liked-button" onClick={handleLikedBirdsButtonClick}>
          {showLikedBirds ? "Show All Birds" : "Show Liked Birds"}
        </button>
      </div>
      <div className="card-container">
        <div className="card-list">
          {sortedUsers.map((user) => (
            <Link to={`/bird/${user._id}`} key={user._id}>
              <Card user={user} key={user._id} />
            </Link>
          ))}
        </div>
      </div>
    </>
  );
};

已尝试在handleSelectChange中添加event.preventDefault()，也移除过点赞排序逻辑，问题依旧。通过console.log确认selectedPattern始终保持用户选中值，未回退。

问题根源在于MigrationSelect中的<select>是非受控组件——它没有绑定与selectedPattern对应的value属性。当sortedUsers为空时，组件会重新渲染空状态的JSX，此时<select>没有明确的value值，会默认选中第一个选项（即「All」），但实际状态selectedPattern并没有改变，导致显示与状态不一致。

步骤1：修改MigrationSelect组件，接收并绑定selectedPattern #

// 修改组件props，添加selectedPattern
const MigrationSelect = ({ handleSelectChange, selectedPattern }) => {
    return (
      <div>
        <div className="sort-container">
          <label htmlFor="migration-pattern-select">
            Sort by Migration Pattern:
          </label>
          {/* 给select添加value属性，绑定到selectedPattern */}
          <select 
            id="migration-pattern-select" 
            onChange={handleSelectChange}
            value={selectedPattern}
          >
            <option value="">All</option>
            <option value="New Zealand to Alaska">New Zealand to Alaska</option>
            <option value="Arctic to Antarctic and Back">
              Arctic to Antarctic and Back
            </option>
            <option value="Eastern United States to Central America">
              Eastern United States to Central America
            </option>
            //...更多选项
          </select>
        </div>
      </div>
    );
};

步骤2：在UserList中调用MigrationSelect时传入selectedPattern #

修改两处调用MigrationSelect的地方：

// 空状态中的调用
if (sortedUsers.length === 0) {
  return (
    <>
      <MigrationSelect 
        handleSelectChange={handleSelectChange}
        selectedPattern={selectedPattern} // 新增这一行
      />
      <button className="liked-button" onClick={handleLikedBirdsButtonClick}>
        {showLikedBirds ? "Show All Birds" : "Show Liked Birds"}
      </button>
      <h2>No birds currently on this path!</h2>
      {loggedInUserLikes === null ||
        (loggedInUserLikes.length === 0 && (
          <h2>You haven't liked any birds yet!</h2>
        ))}
    </>
  );
}

// 正常状态中的调用
return (
  <>
    <div className="dash-sorting">
      <MigrationSelect 
        handleSelectChange={handleSelectChange}
        selectedPattern={selectedPattern} // 新增这一行
      />
      <button className="liked-button" onClick={handleLikedBirdsButtonClick}>
        {showLikedBirds ? "Show All Birds" : "Show Liked Birds"}
      </button>
    </div>
    <div className="card-container">
      <div className="card-list">
        {sortedUsers.map((user) => (
          <Link to={`/bird/${user._id}`} key={user._id}>
            <Card user={user} key={user._id} />
          </Link>
        ))}
      </div>
    </div>
  </>
);

这样修改后，<select>会始终与selectedPattern状态保持同步，无论组件是否因为空状态重新渲染，下拉框的显示都会准确反映当前选中的选项，用户也能正常切换回「All」选项。

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