如何在React.js应用中加载多个data.js数据文件？

Hey there! Loading multiple data files like dataCPU.js, dataGPU.js, etc., into your React app is totally manageable—here are two clean, scalable approaches that fit with your current code setup:

Approach 1: Import and Merge Files Directly in App.js #

If you want a quick start, you can import each data file individually and merge their products arrays right in your App component:

Updated App.js #

import Header from './components/Header';
import Main from './components/Main';
import Builder from './components/Builder';
import { useState } from 'react';
// Import all your data files here
import dataRAM from './dataRAM';
import dataCPU from './dataCPU';
import dataGPU from './dataGPU';
import dataMotherboard from './dataMotherboard';
// Add the rest of your 7 data files here

function App() {
  // Merge all products into a single array
  const products = [
    ...dataRAM.products,
    ...dataCPU.products,
    ...dataGPU.products,
    ...dataMotherboard.products,
    // Include products from other data files here
  ];

  const [builderItems, setBuilderItems] = useState([]);

  // Keep your existing onAdd and onRemove functions the same
  const onAdd = (product) => {
    const exist = builderItems.find(x => x._id === product._id);
    if(exist){
      setBuilderItems(
        builderItems.map(x => x._id === product._id ? {...exist, qty: exist.qty+1} : x )
      );
    }else{
      setBuilderItems([...builderItems, {...product, qty: 1}])
    }
  }

  const onRemove = (product) => {
    const exist = builderItems.find((x) => x._id === product._id);
    if(exist.qty === 1) {
      setBuilderItems(builderItems.filter((x) => x._id !== product._id));
    } else{
      setBuilderItems(
        builderItems.map(x => x._id === product._id ? {...exist, qty: exist.qty-1} : x )
      );
    }
  }

  return (
    <div className="App">
      <Header countBuilderItems={builderItems.length}></Header>
      <div className = "row">
        <Main onAdd={onAdd} products={products}>
        </Main>
        <Builder onAdd={onAdd} onRemove={onRemove} builderItems = {builderItems} ></Builder>
      </div>
    </div>
  );
}

export default App;

Note: Make sure every product across all data files has a unique _id (e.g., prefix CPU products with cpu- instead of just 1, like cpu-1, cpu-2). This prevents conflicts in your cart/builder logic.

Approach 2: Create a Central Data Hub (Better for Scalability) #

If you want a more maintainable setup (especially with 7+ files), create a central file to import and organize all your data. This way, you only need to update one file when adding new data sources.

Step 1: Create data/index.js #

// Import all your data files
import dataRAM from './dataRAM';
import dataCPU from './dataCPU';
import dataGPU from './dataGPU';
// Add the rest of your data files here

// Export merged products for global use
export const allProducts = [
  ...dataRAM.products,
  ...dataCPU.products,
  ...dataGPU.products,
  // Include other product arrays here
];

// Optional: Export individual categories if you want to filter products later
export const ramProducts = dataRAM.products;
export const cpuProducts = dataCPU.products;
export const gpuProducts = dataGPU.products;

Step 2: Update App.js to Use the Central Hub #

import Header from './components/Header';
import Main from './components/Main';
import Builder from './components/Builder';
import { useState } from 'react';
// Import from your central data file
import { allProducts } from './data';

function App() {
  const products = allProducts;
  const [builderItems, setBuilderItems] = useState([]);

  // Keep your existing onAdd/onRemove functions unchanged

  return (
    <div className="App">
      <Header countBuilderItems={builderItems.length}></Header>
      <div className = "row">
        <Main onAdd={onAdd} products={products}>
        </Main>
        <Builder onAdd={onAdd} onRemove={onRemove} builderItems = {builderItems} ></Builder>
      </div>
    </div>
  );
}

export default App;

Bonus: Filter by Category (If Needed) #

If you want to let users switch between CPU/GPU/RAM views, use the category exports from data/index.js:

import { ramProducts, cpuProducts, gpuProducts } from './data';
import { useState } from 'react';

function App() {
  const [activeCategory, setActiveCategory] = useState('ram');
  
  const products = {
    ram: ramProducts,
    cpu: cpuProducts,
    gpu: gpuProducts
  }[activeCategory];

  return (
    <div className="App">
      <Header countBuilderItems={builderItems.length}></Header>
      {/* Add category toggle buttons */}
      <div className="category-buttons">
        <button onClick={() => setActiveCategory('ram')}>RAM</button>
        <button onClick={() => setActiveCategory('cpu')}>CPU</button>
        <button onClick={() => setActiveCategory('gpu')}>GPU</button>
      </div>
      <div className = "row">
        <Main onAdd={onAdd} products={products}></Main>
        <Builder onAdd={onAdd} onRemove={onRemove} builderItems={builderItems}></Builder>
      </div>
    </div>
  );
}

Either approach works—go with the first if you need a quick fix, or the second if you want to keep your codebase clean as you add more data files.

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