如何在React函数组件中用下拉选择器筛选表格？

你的现有代码缺少筛选状态管理和筛选逻辑，导致下拉选择器无法对表格数据生效。以下是修改后的完整可运行代码：

import { useState, useEffect } from 'react';

export default function FilterableTable() {
  const [data, setData] = useState([]);
  const [selectedFilter, setSelectedFilter] = useState(''); // 存储选中的筛选值
  const URL = 'https://jsonplaceholder.typicode.com/posts';

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = () => {
    fetch(URL)
      .then((res) => res.json())
      .then((response) => {
        setData(response);
      });
  };

  // 生成唯一的userId选项（从数据中提取，避免硬编码）
  const uniqueUserIds = [...new Set(data.map(item => item.userId))];

  // 根据选中值筛选数据
  const filteredData = selectedFilter 
    ? data.filter(item => item.userId.toString() === selectedFilter) 
    : data;

  return (
    <>
      {/* 原生下拉选择器，绑定状态和变更事件 */}
      <select 
        value={selectedFilter} 
        onChange={(e) => setSelectedFilter(e.target.value)}
      >
        <option value="">全部</option>
        {uniqueUserIds.map(id => (
          <option key={id} value={id.toString()}>用户 {id}</option>
        ))}
      </select>

      <table border="1" style={{ marginTop: '10px' }}>
        <thead>
          <tr>
            <th>User Id</th>
            <th>Id</th>
            <th>Title</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          {filteredData.map((item) => (
            <tr key={item.id}> {/* 用item.id作为key更可靠，避免索引问题 */}
              <td>{item.userId}</td>
              <td>{item.id}</td>
              <td>{item.title}</td>
              <td>{item.body}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}

关键修改说明： #

• 添加筛选状态：新增selectedFilter状态变量，用来记录用户选中的筛选条件
• 下拉选择器改造：使用原生<select>（如果你用的是第三方组件如Ant Design的Select，只需调整绑定方式，核心逻辑一致），通过onChange事件更新状态
• 动态生成选项：从接口返回的数据中提取唯一的userId作为选项，避免硬编码，适配数据变化
• 筛选逻辑实现：通过filteredData计算得到符合选中条件的数据，无选中值时显示全部数据
• 优化key值：用数据自身的id作为列表项的key，比索引更稳定

内容的提问来源于stack exchange，提问作者YASSINE ES-SADANY