React项目移除硬编码实现代码动态化的最优方案

当前代码通过硬编码国家名称（如"USA"、"CAN"）实现数据过滤，扩展性差，新增国家时需要手动修改代码。以下是最优动态化实现方案：

核心思路 #

先将原始数据按国家简称分组，得到一个以国家简称为键、对应企业数组为值的对象，再动态遍历该对象渲染组件，无需硬编码任何国家名称。

修改后的代码实现 #

Home.js #

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

const Home = () => {
  const data = [
    { country: { cntryShortName: "USA", corpName: "USA Brad" } },
    { country: { cntryShortName: "USA", corpName: "USA Bayker" } },
    { country: { cntryShortName: "CAN", corpName: "Canada Zyphus" } },
    { country: { cntryShortName: "USA", corpName: "USA Hamilton" } },
    { country: { cntryShortName: "CAN", corpName: "Canada Sterling" } },
    { country: { cntryShortName: "CAN", corpName: "Canada Stones" } },
    { country: { cntryShortName: "USA", corpName: "USA Global Exchange" } },
    { country: { cntryShortName: "USA", corpName: "USA Wrights" } },
    { country: { cntryShortName: "GERMANY", corpName: "German Moto" } },
    { country: { cntryShortName: "GERMANY", corpName: "German Wines" } },
    { country: { cntryShortName: "GERMANY", corpName: "German Plastics" } },
    { country: { cntryShortName: "CAN", corpName: "Canada Electronics" } }
  ];

  const [groupedData, setGroupedData] = useState({});

  useEffect(() => {
    // 按国家简称分组数据
    const grouped = data.reduce((acc, item) => {
      const countryKey = item.country.cntryShortName;
      if (!acc[countryKey]) {
        acc[countryKey] = [];
      }
      acc[countryKey].push(item);
      return acc;
    }, {});
    setGroupedData(grouped);
  }, []);

  return (
    <>
      {/* 动态遍历分组后的数据，渲染每个国家的组件 */}
      {Object.entries(groupedData).map(([countryName, items]) => (
        <DetailComp key={countryName} country={countryName} data={items} />
      ))}
    </>
  );
};

export default Home;

DetailComp.js #

const DetailComp = ({ country, data }) => {
  return (
    <div>
      <h3>{country} 企业列表</h3>
      {data.map((item, index) => (
        <h2 key={index}>{item.country.corpName}</h2>
      ))}
    </div>
  );
};

export default DetailComp;

方案优势 #

• 完全动态化：新增国家数据时无需修改代码，自动完成分组并渲染
• 代码简洁：避免重复的过滤逻辑，大幅减少冗余代码
• 可扩展性强：后续可轻松添加国家筛选、排序等功能

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