如何从数组的逗号分隔字符串元素中提取首个部分？

我有如下数组（每个元素是逗号分隔的字符串）：

[
  "BIOCON,Biocon Ltd.,Pharma,2022-10-28 18:48:56",
  "LALPATHLAB,Dr. Lal Path Labs Ltd.,Healthcare Services,2022-10-28 18:48:56",
  "INDUSTOWER,Indus Towers Limited ,Telecom,2022-10-28 18:48:56",
  "DIVISLAB,Divi's Laboratories Ltd.,Pharma,2022-10-28 18:48:56",
  "TECHM,Tech Mahindra Ltd.,Information Technology,2022-10-28 18:48:56",
  "IDBI,IDBI Bank Ltd.,Financial Services,2022-10-28 18:48:56",
  "ENGINERSIN,Engineers India Ltd.,Construction,2022-10-28 18:48:56",
  "KAJARIACER,Kajaria Ceramics Ltd.,Construction,2022-10-28 18:48:56",
  "SBIN,State Bank of India,Financial Services,2022-10-28 18:48:56",
  "BHARATFIN,Bharat Financial Inclusion Ltd.,Financial Services,2022-10-28 18:48:56",
  "OFSS,Oracle Financial Services Software Ltd.,Information Technology,2022-10-28 18:48:56",
  "CENTURYTEX,Century Textile & Industries Ltd.,Cement & Cement Products,2022-10-28 18:48:56",
  "HAVELLS,Havells India Ltd.,Consumer Goods,2022-10-28 18:48:56",
  "INDIGO,InterGlobe Aviation Ltd.,Services,2022-10-28 18:48:56",
  "IPCALAB,Ipca Laboratories Limited,,2022-10-28 18:48:56",
  "ADANIPOWER,Adani Power Ltd.,Energy,2022-10-28 18:48:56",
  "GRASIM,Grasim Industries Ltd.,Cement & Cement Products,2022-10-28 18:48:56",
  "TORNTPOWER,Torrent Power Ltd.,Energy,2022-10-28 18:48:56",
  "AARTIIND,Aarti Industries Limited,Chemicals,2022-10-28 18:48:56",
  "INFIBEAM,Infibeam Incorporation Ltd.,Information Technology,2022-10-28 18:48:56",
  ""
]

我需要从每个字符串元素中提取首个逗号分隔的部分，并将其映射为<TCell>组件。当前使用的代码如下：

row?.split(",")?.map((splt) => (
  console.log(splt),
  <TCell key={splt}>{splt}</TCell>
))

其中row代表数组中的单个元素，请问该如何修改代码实现需求？

你当前的代码会把每个逗号分割后的片段都映射成<TCell>，但我们只需要第一个片段。可以通过以下方式修改：

单元素处理场景 #

如果只是处理单个row元素，直接提取分割后的第一个值即可，不需要用map：

// 处理空字符串或分割后无值的情况，避免出现undefined
const firstSegment = row?.split(",")[0] || "";
return <TCell key={firstSegment}>{firstSegment}</TCell>;

数组遍历场景 #

如果是遍历整个数组处理每个row，可以这样写：

yourArray.map((row, index) => {
  const firstSegment = row?.split(",")[0] || "";
  // 若首个片段可能重复，建议用index作为key，或者确保firstSegment唯一
  return <TCell key={index}>{firstSegment}</TCell>;
});

注意点 #

• 针对数组末尾的空字符串元素，用|| ""兜底，避免渲染undefined。
• key值要保证唯一性：如果首个逗号分隔的内容可能重复，优先使用数组索引index作为key，或者结合其他唯一标识。

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