React中调用输入输出一致的多API时，如何避免重复代码？

针对你有5个输入输出完全一致的水果API场景，最优方案是用「API映射表+通用组件」的方式，完全没必要为每种水果单独写组件，能最大程度消除重复代码，同时保证可维护性。

1. 先整理API映射表 #

把所有水果API统一放到一个对象里，用水果名称作为键，后续可以通过键快速匹配对应的API：

// api/fruits.js
import { getApples, getBananas, getOranges, getGrapes, getMangoes } from './your-api-source';

export const fruitApiMap = {
  apples: getApples,
  bananas: getBananas,
  oranges: getOranges,
  grapes: getGrapes,
  mangoes: getMangoes
};

2. 封装通用水果列表组件 #

创建一个通用的FruitList组件，接收fruitType（对应映射表的键）和storeId作为props，内部统一处理API调用、状态管理和UI渲染逻辑：

// components/FruitList.jsx
import { useState, useEffect } from 'react';
import { fruitApiMap } from '../api/fruits';

const FruitList = ({ fruitType, storeId }) => {
  const [fruits, setFruits] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!storeId || !fruitApiMap[fruitType]) return;

    const fetchFruits = async () => {
      setIsLoading(true);
      setError(null);
      try {
        const fruitList = await fruitApiMap[fruitType](storeId);
        setFruits(fruitList);
      } catch (err) {
        setError(`加载${fruitType}失败：${err.message}`);
      } finally {
        setIsLoading(false);
      }
    };

    fetchFruits();
  }, [fruitType, storeId]);

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div className="error-text">{error}</div>;

  return (
    <div className="fruit-list-container">
      <h3>{fruitType.charAt(0).toUpperCase() + fruitType.slice(1)}</h3>
      <ul>
        {fruits.map(fruit => (
          <li key={fruit.id}>{fruit.name} - 单价：{fruit.price}元</li>
        ))}
      </ul>
    </div>
  );
};

export default FruitList;

3. 在父组件中复用通用组件 #

父组件只需要传入不同的fruitType和storeId，就能快速渲染所有水果的列表，代码简洁到极致：

// components/StoreFruitDashboard.jsx
import FruitList from './FruitList';

const StoreFruitDashboard = ({ storeId }) => {
  const fruitTypes = ['apples', 'bananas', 'oranges', 'grapes', 'mangoes'];

  return (
    <div className="store-dashboard">
      {fruitTypes.map(type => (
        <FruitList key={type} fruitType={type} storeId={storeId} />
      ))}
    </div>
  );
};

export default StoreFruitDashboard;

方案优势 #

• 零重复代码：API调用、状态处理、UI渲染逻辑只写一次，新增水果时仅需在映射表和类型数组中补充一行内容。
• 易维护：如果后续API参数或返回格式调整，只需要修改通用组件，不用逐个修改5个组件。
• 灵活扩展：如果某类水果需要特殊UI，可在通用组件中通过条件判断处理，或基于通用组件做轻量扩展，依然能复用大部分逻辑。

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