添加多值 React JS 的新行答案

【问题标题】：Adding new line of multiple value React JS添加多值 React JS 的新行
【发布时间】：2021-09-10 14:39:21
【问题描述】：

我想在 map 函数中添加一个新的字符串行。
我的代码如下所示：

<tbody>
    {" "}
    {dataTable.map((table) => {
        return (
            <tr key={table.id}>
                <th className="border-t-0 px-6 align-middle border-l-0 py-4 pt-4 pb-0 text-left flex items-center">
                    <Avatar name={table.title} size={30} round="25px" className="mr-2" color="#f9fbff" fgColor="#4987f3" />
                    <span className={"ml-3 font-bold light"}>{table.title} </span>{" "}
                </th>{" "}
                <td className="border-t-0 px-6 border-l-0 py-4 pt-4 pb-0"> {table.id} </td> {" "}
                <td className="border-t-0 px-6 border-l-0 py-4 pt-4 pb-0"> {table.footer} </td>{" "}
                <td className="border-t-0 px-6 border-l-0 py-4 pt-4 pb-0"> {table.description} </td> {" "}
                <td className="border-t-0 px-6 border-l-0 py-4 pt-4 pb-0"> <i className="fas fa-circle text-emerald-500 mr-2"></i>{" "} {table.tags} </td>{" "}
            </tr>
        );
    })}{" "}
</tbody>

对于标签数据，有一些值，我想为每个标签的值添加一个新行。

对于数据：

[
  {
    "id": 936556,
    "category": 7,
    "title": "Gorgeous Cotton Fish",
    "description": "The Apollotech B340 is an affordable wireless mouse with reliable connectivity, 12 months battery life and modern design",
    "footer": "Gorgeous"
  },
  {
    "id": 874754,
    "category": 8,
    "title": "Unbranded Plastic Fish",
    "description": "The Football Is Good For Training And Recreational Purposes",
    "footer": "Practical",
    "tags": [
      "Music",
      "Kids",
      "Books",
      "Clothing",
      "Baby"
    ],
    "createdAt": "2021-09-10T01:39:35.109073+00:00"
  },
]

【问题讨论】：

你的table.tags是什么样的？
你能增加清晰度吗？ table.tags 的值是多少？你真正想展示什么。
该值是一个字符串，就像截图一样。并从 json 获取
您可以将实际值添加到问题中。以及你想要达到什么目的。我可以看到 dataTable 是一个数组。每个数组项都是一个对象，每个对象都有属性 tags ：哪个是字符串？对吗？
是的@TusharShahi，它是一个字符串，我想要实现的是，标签值的结果可以跟随屏幕截图，因为现在它只有一行。

标签： reactjs get next.js fetch

【解决方案1】：

我认为您需要另外一个 map() 专门用于该属性。然后，您可以使用 <p> 标签或 <span> 之类的东西来显示您的数据。

<tbody>
    {" "}
    {dataTable.map((table) => {
        return (
            <tr key={table.id}>
                <th className="border-t-0 px-6 align-middle border-l-0 py-4 pt-4 pb-0 text-left flex items-center">
                    <Avatar name={table.title} size={30} round="25px" className="mr-2" color="#f9fbff" fgColor="#4987f3" />
                    <span className={"ml-3 font-bold light"}>{table.title} </span>{" "}
                </th>{" "}
                <td className="border-t-0 px-6 border-l-0 py-4 pt-4 pb-0"> {table.id} </td> {" "}
                <td className="border-t-0 px-6 border-l-0 py-4 pt-4 pb-0"> {table.footer} </td>{" "}
                <td className="border-t-0 px-6 border-l-0 py-4 pt-4 pb-0"> {table.description} </td> {" "}
                <td className="border-t-0 px-6 border-l-0 py-4 pt-4 pb-0"> {table.tags.map((x) => <p><i className="fas fa-circle text-emerald-500 mr-2"></i>{" "} {x}</p>{" "}  );}
     </td>{" "}</tr>
        );
    })}{" "}
</tbody>

【讨论】：