React项目中按Company筛选数据二次点击失效问题求助

在React项目中实现按公司筛选内容的功能：点击按钮展示指定company的内容，但首次点击正常，二次点击后无内容显示。问题根源是每次筛选后直接修改了存储原始数据的data状态，后续筛选是基于已过滤后的子集进行，自然无法得到其他公司的数据。

核心是保留原始完整数据集，通过单独的状态管理筛选结果，避免污染原始数据：

• 添加一个filteredData状态，专门存储当前要展示的筛选后数据
• 原始data状态仅用于保存接口返回的完整数据，全程不修改
• 筛选函数基于原始data进行过滤，更新filteredData
• 渲染时遍历filteredData而非原始data

修改后的完整代码 #

import React, { useEffect, useState } from "react";
import Loading from "./Loading";

function App() {
    const url = "https://course-api.com/react-tabs-project";
    const [loading, setLoading] = useState(true);
    const [data, setData] = useState([]); // 存储完整原始数据
    const [filteredData, setFilteredData] = useState([]); // 存储筛选后的数据

    async function setCompany(companyName) {
        // 基于原始完整数据筛选
        const newData = data.filter((info) => info.company === companyName);
        setFilteredData(newData);
    }

    async function getData() {
        try {
            const response = await fetch(url);
            const fetchedData = await response.json();
            setData(fetchedData);
            // 初始化时默认展示全部数据
            setFilteredData(fetchedData);
            setLoading(false);
        } catch (err) {
            setLoading(false);
            console.error(`ERROR  ==> ${err}`);
        }
    }

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

    if (loading) {
        return <Loading></Loading>; // 加载中页面
    }
    return (
        <main>
            <div className="top-wrapper">
                <h2>Experience</h2>
                <div className="underline"></div>
            </div>
            {/* 遍历筛选后的数据 */}
            {filteredData.map((item) => {
                const { id, order, title, dates, duties, company } = item;
                return (
                    <article key={id}>
                        <h3>{title}</h3>
                        <span className="company">{company}</span>
                        <p>{dates}</p>
                        <ul>
                            {duties.map((duty, index) => {
                                return <li key={index}>{duty}</li>;
                            })}
                        </ul>
                        <button>MORE INFO</button>
                    </article>
                );
            })}
            <div className="nav-buttons">
                <button
                    onClick={() => {
                        setCompany("TOMMY");
                    }}
                    className="nav-btn"
                >
                    TOMMY
                </button>
                <button
                    onClick={() => {
                        setCompany("BIGDROP");
                    }}
                    className="nav-btn"
                >
                    BIGDROP
                </button>
                <button
                    onClick={() => {
                        setCompany("CUKER");
                    }}
                    className="nav-btn"
                >
                    CUKER
                </button>
            </div>
        </main>
    );
}

export default App;

额外优化建议 #

• 可添加「全部」按钮，点击时将filteredData重置为原始data，恢复展示所有内容
• 在setCompany函数中增加data非空判断，避免因数据未加载完成导致的筛选报错

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