合并数组重复Symbol的Market属性及ES6/React JSX实现问询

Hey there! Let's tackle your problem step by step. First, we'll merge those duplicate symbol objects by combining their market properties, then we'll refine the ES6 arrow function approach and adjust the React JSX table rendering for better usability.

Merging Duplicate Symbol Objects #

Your initial groupBy function groups objects by symbol, but we need to take it a step further and merge the properties of each grouped object into a single one. Here's how to do this cleanly with ES6 features, including arrow functions:

const mergeBySymbol = (arr) => {
  // Use reduce to build a map where keys are symbols, values are merged objects
  const mergedMap = arr.reduce((acc, current) => {
    const { symbol, ...marketProps } = current; // Extract symbol and remaining market attributes
    if (!acc[symbol]) {
      // Initialize entry for new symbol with its first set of market data
      acc[symbol] = { symbol, ...marketProps };
    } else {
      // Merge existing market data with new incoming properties
      acc[symbol] = { ...acc[symbol], ...marketProps };
    }
    return acc;
  }, {});

  // Convert the map's values into the final formatted array
  return Object.values(mergedMap);
};

// Test with your sample array
const theArray = [ 
  { "symbol": "CAT", "market_a": "20" }, 
  { "symbol": "DOG", "market_a": "40" }, 
  { "symbol": "DUCK", "market_a": "15" }, 
  { "symbol": "CAT", "market_b": "60" }, 
  { "symbol": "DOG", "market_b": "55" }, 
  { "symbol": "FISH", "market_b": "40" }, 
  { "symbol": "CAT", "market_c": "65" }, 
  { "symbol": "DOG", "market_c": "20" }, 
  { "symbol": "FISH", "market_c": "70" } 
];

const formattedArray = mergeBySymbol(theArray);
console.log(formattedArray);

This will output exactly the merged structure you're targeting:

[
  { "symbol": "CAT", "market_a": "20", "market_b": "60", "market_c": "65" },
  { "symbol": "DOG", "market_a": "40", "market_b": "55", "market_c": "20" },
  { "symbol": "DUCK", "market_a": "15" },
  { "symbol": "FISH", "market_b": "40", "market_c": "70" }
]

ES6 Arrow Function for React JSX Table Rows #

Your existing map function already uses arrow functions, but we can tweak it to handle missing market properties (like DUCK not having market_b or market_c) so your table doesn't show undefined. Here's an improved version:

const MarketDataTable = () => {
  const formattedArray = mergeBySymbol(theArray); // Assume this is available in your component

  return (
    <table>
      <thead>
        <tr>
          <th>Symbol</th>
          <th>Market A</th>
          <th>Market B</th>
          <th>Market C</th>
        </tr>
      </thead>
      <tbody>
        {formattedArray.map((item) => (
          <tr key={item.symbol}> {/* Use unique symbol as key instead of index for better performance */}
            <td className="td-symbol">{item.symbol}</td>
            <td className="td-price">{item.market_a || '-'}</td> {/* Fallback to dash if value is missing */}
            <td className="td-price">{item.market_b || '-'}</td>
            <td className="td-price">{item.market_c || '-'}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

A quick note on keys: Using item.symbol as the key is better than using the array index because symbols are unique here. This helps React efficiently update the table if your data changes.

内容的提问来源于stack exchange，提问作者J. Dohn