react-bootstrap-table2 - 使用 React Bootstrap Table2 在列表中的每个项目后添加“,”

Question

我在使用 react-bootstrap-table2 库正确显示从 api 返回的项目列表时遇到问题。

返回的 json 结构如下：

[{"name":"Client1","list_of_items":["item1","item2","item3","item4","item5"]}]

当它显示时，“list_of_items”就像一个大字符串一样一起运行（例如：item1item2item3item4item5）。

有没有办法在每个项目之间添加逗号和空格？

这是我的代码现在在 App.js 文件中的样子：

import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import BootstrapTable from 'react-bootstrap-table-next';

export const App = () => {
    const clients = [
        {
            name: 'Client1',
            list_of_items: ['item1', 'item2', 'item3', 'item4', 'item5']
        },
        {
            name: 'Client2',
            list_of_items: ['item1', 'item2', 'item3', 'item4', 'item5']
        },
        {
            name: 'Client3',
            list_of_items: ['item1', 'item2', 'item3', 'item4', 'item5']
        }];
    const columns = [{
        dataField: 'name',
        text: 'Client'
    }, {
        dataField: 'list_of_items',
        text: 'List of Items'
    }];

return (
    <div>
        <BootstrapTable
            striped
            hover
            keyField='name'
            data={clients}
            columns={columns}/>
    </div>
);

}