React组件中点击按钮按CitizenshipType字段筛选API数据的实现问询

我来帮你搞定这个筛选功能，咱们一步步来优化代码：

第一步：统一获取所有公民身份数据 #

首先，你之前在getStaticProps里分开拉取了Europe和Caribbien的数据，这样后续筛选会比较麻烦。咱们改成一次性获取所有数据，这样在组件里可以更灵活地过滤：

export default function Home({ citizenshipData }) {
  return (
    <div>
      <Benefits />
      <Citizenship data={citizenshipData} />
      <Video />
    </div>
  );
}

export async function getStaticProps() {
  // 一次性获取所有公民身份数据，去掉类型限制
  const response = await fetch("http://localhost:1337/citizenships?_limit=10");
  const citizenshipData = await response.json();
  return {
    props: { citizenshipData },
  };
}

第二步：在Citizenship组件中实现筛选逻辑 #

接下来，咱们给Citizenship组件添加状态管理和筛选功能：

import { useState } from 'react';

export default function Citizenship({ data }) {
  // 初始化筛选状态，默认展示全部数据
  const [filterType, setFilterType] = useState('all');

  // 处理按钮点击，更新筛选类型
  const handleFilterClick = (type) => {
    setFilterType(type);
  };

  // 根据筛选类型过滤数据
  const filteredData = data.filter(item => {
    if (filterType === 'all') return true; // 展示全部
    if (filterType === 'europe') return item.CitizenshipType === 'Europe';
    if (filterType === 'caribbean') return item.CitizenshipType === 'Caribbien';
    if (filterType === 'other') return item.CitizenshipType !== 'Europe' && item.CitizenshipType !== 'Caribbien';
    return true;
  });

  return (
    <>
      <div>
        {/* 筛选按钮，绑定点击事件 */}
        <div onClick={() => handleFilterClick('caribbean')} style={{ cursor: 'pointer', display: 'inline-block', marginRight: '10px' }}>
          CARRIBEAN
        </div>
        <div onClick={() => handleFilterClick('europe')} style={{ cursor: 'pointer', display: 'inline-block', marginRight: '10px' }}>
          EUROPE
        </div>
        <div onClick={() => handleFilterClick('other')} style={{ cursor: 'pointer', display: 'inline-block' }}>
          OTHER PROGRAMS
        </div>
      </div>

      <div>
        {/* 渲染过滤后的数据，不用再分开处理items和citi */}
        {filteredData.map((item) => (
          <div style={{ padding: "40px" }} key={item.id}>
            <div className="citizen-item">
              <div className="container6">
                <img src={`http://localhost:1337${item.Thumbnail.url}`} alt={item.Title} />
                <div>{item.Title}</div>
                <div>Access to {item.CountriesAccessible} countries</div>
                <div>
                  <button className="findButton">FIND OUT MORE</button>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

关键细节说明 #

• 状态管理：用useState跟踪当前选中的筛选类型，点击按钮时更新这个状态。
• 过滤逻辑：根据filterType的值，对原始数据进行过滤，返回符合条件的条目。
• 代码简化：把之前分开渲染items和citi的逻辑合并成一个循环，避免重复代码，维护起来更方便。
• 用户体验：给按钮加上cursor: pointer样式，让用户知道这是可点击的元素。

这样修改后，点击不同的按钮就能对应展示不同类别的内容了，默认会展示全部数据。

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