如何将React中map生成的多文本转为逗号分隔的单个字符串？

你不需要用map生成多个<div>元素，而是先提取所有productDescription字段，用逗号加空格拼接成单个字符串，再渲染到一个<div>里即可：

// 提取所有产品描述并拼接为逗号分隔的字符串
const productList = filteredCardMemberData
  .map(info => info.productDescription)
  .join(', ');

// 渲染单个容器展示拼接后的内容
const DisplayData = <div>{productList}</div>;

说明 #

• map(info => info.productDescription)会把数组里的每个对象转换为对应的productDescription字符串，得到类似['Apple', 'Mango']的数组。
• join(', ')方法会将数组元素用, （逗号加空格）连接成单个字符串，最终得到Apple, Mango。
• 现在只渲染一个<div>，不需要再禁用react/jsx-key规则，因为没有循环生成多个JSX元素了。

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