React useCallback无效：Select组件选值后重渲染并重置问题

核心问题分析 #

下拉框选中后重置，本质是未将select设置为受控组件，没有绑定选中值的状态；同时代码存在switch分支语法错误，且排序逻辑依赖已修改的items状态，可能导致排序结果异常。

具体修复步骤 #

1. 新增状态跟踪选中值
   在组件顶部添加状态，保存当前选中的排序选项：

const [sortValue, setSortValue] = useState('relevance');

2. 将select改为受控组件
   给select添加value={sortValue}属性，确保选中状态与状态值同步：

<select name="filters" onChange={onChange} value={sortValue}>
  <option value="relevance">Relevance</option>
  <option value="ascend">A-Z</option>
  <option value="priceLow">Price: Low to high</option>
  <option value="saleFirst">Sales items first</option>
</select>

3. 修复switch分支语法错误
   原代码中case ("relevance", "saleFirst")是逗号表达式，实际仅匹配saleFirst，需拆分为独立case：

switch (value) {
  case "relevance":
  case "saleFirst":
    arr = saleItemsFirst(products, false);
    break;
  case "ascend":
    arr = sortByName(products);
    break;
  case "priceLow": // 与选项的value值对应，原代码此处case值不匹配
    arr = sortByPrice(products);
    break;
  default:
    arr = saleItemsFirst(products);
    break;
}

4. 调整排序数据源与逻辑
   不要基于已修改的items状态排序，直接使用原始products数据避免多次排序混乱；同时先更新选中状态再处理排序：

const onChange = useCallback((e) => {
  const { value } = e.target;
  setSortValue(value); // 优先更新选中状态
  let arr = [];

  switch (value) {
    case "relevance":
    case "saleFirst":
      arr = saleItemsFirst(products, false);
      break;
    case "ascend":
      arr = sortByName(products);
      break;
    case "priceLow":
      arr = sortByPrice(products);
      break;
    default:
      arr = saleItemsFirst(products);
      break;
  }

  setItems([...arr]);
}, [products]);

5. 简化SortBy组件定义
   无需用useCallback包裹组件，直接定义为普通组件即可：

const SortBy = () => {
  return (
    <select name="filters" onChange={onChange} value={sortValue}>
      <option value="relevance">Relevance</option>
      <option value="ascend">A-Z</option>
      <option value="priceLow">Price: Low to high</option>
      <option value="saleFirst">Sales items first</option>
    </select>
  );
};

完整修复后代码示例 #

function App() {
  const [items, setItems] = useState(products);
  const [sortValue, setSortValue] = useState('relevance');

  const onChange = useCallback((e) => {
    const { value } = e.target;
    setSortValue(value);
    let arr = [];

    switch (value) {
      case "relevance":
      case "saleFirst":
        arr = saleItemsFirst(products, false);
        break;
      case "ascend":
        arr = sortByName(products);
        break;
      case "priceLow":
        arr = sortByPrice(products);
        break;
      default:
        arr = saleItemsFirst(products);
        break;
    }

    setItems([...arr]);
  }, [products]);

  const SortBy = () => {
    return (
      <select name="filters" onChange={onChange} value={sortValue}>
        <option value="relevance">Relevance</option>
        <option value="ascend">A-Z</option>
        <option value="priceLow">Price: Low to high</option>
        <option value="saleFirst">Sales items first</option>
      </select>
    );
  };

  return (
    <div className="App">
      <SortBy />
      <hr />
      <section>
        {items.map((val) => (
          <div key={val.id}> {/* 添加唯一key属性避免React警告 */}
            <span>{val.productName}</span> <div>${val.price}</div>
            <hr />
          </div>
        ))}
      </section>
      {/* 其他内容 */}
    </div>
  );
}

额外提示 #

• 循环渲染元素时必须添加唯一key属性，避免渲染异常
• 若products为动态获取（如接口请求），可使用useRef保存原始数据，避免依赖变化导致onChange频繁重建

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