Reactjs React将芯片分配到表格单元格中，表格单元格的行数为5个单元格宽

我想使用挂钩和React material ui在React功能组件中创建一个表。我有一个字符串数组，我想为表单元格中的每个字符串创建一个芯片，如下所示：

<TableCell>
     <Chip
        key={index}
        className={classes.chips}
        size="large"
        label={user}
        icon={<AccountCircleIcon className={classes.closeIcon}/>}
      />
 </TableCell>

import React，{useState，useffect}来自“React”；
//您需要在下面添加正确的路径
从“./AccountCircleIcon”导入AccountCircleIcon；
从“./TableCell”导入TableCell；
从“./TableRow”导入TableRow；
从“./Chip”导入芯片；
const ChipContainer=props=>{
//状态在这里初始化
常量[selectedUsersToDelete，setSelectedUsersToDelete]=useState（[]）；
//破坏的道具
常量{classes}=props；
//这只是一个示例，演示如何在安装Component后设置状态
使用效果(
() =>
无效设置SelectedUsersToDelete([
“user1”，
“user2”，
“user3”，
“user4”，
“用户5”
]),
[]
);
返回(
{selectedUsersToDelete.map（（用户，索引）=>(
))}
);
};
导出默认容器；
到目前为止，您尝试了什么？我是说，那你在哪里？我试了很多东西！最新的方法是准确地获取代码，并从传递给组件的prop中使用useState设置初始值OK，因此假设
selectedUsersToDelete
是一个由5个字符串组成的数组，您希望在自己的单元格中为每个元素呈现一行吗？所以有5列，对吗？是的，这是正确的
Object.values（selectedUsersToDelete）.map
仅当
selectedUsersToDelete
是一个对象时才有效。如果要映射一个已经是数组的值，只需
selectedUsersToDelete.map
就可以用useState钩子显示这个值了吗？当我介绍钩子的时候，肯定会出错。看看上面的代码。希望这能起作用。那太棒了——也谢谢你的清晰评论——这对我帮助很大！
<div className={classes.chipContainer}> {Object.values(selectedUsersToDelete).map((user, index) => {
      return (
        <TableRow>
        <TableCell>
          <Chip
            key={index}
            className={classes.chips}
            size="large"
            label={user}
            icon={<AccountCircleIcon className={classes.closeIcon}/>}
          />
        </TableCell><TableCell>
          <Chip
            key={index}
            className={classes.chips}
            size="large"
            label={user}
            icon={<AccountCircleIcon className={classes.closeIcon}/>}
          />
        </TableCell>
        </TableRow>
      )
    })}

    </div>

import React, { useState, useEffect } from 'react';

// You'll need to add correct paths below
import AccountCircleIcon from './AccountCircleIcon';
import TableCell from './TableCell';
import TableRow from './TableRow';
import Chip from './Chip';

const ChipContainer = props => {
  // State is initialized here
  const [selectedUsersToDelete, setSelectedUsersToDelete] = useState([]);

  // Props destructred
  const { classes } = props;

  // Just an example showing how you can set state once componnent has mounted
  useEffect(
    () =>
      void setSelectedUsersToDelete([
        'user1',
        'user2',
        'user3',
        'user4',
        'user5'
      ]),
    []
  );

  return (
    <div className={classes.chipContainer}>
      <TableRow>
        {selectedUsersToDelete.map((user, index) => (
          <TableCell>
            <Chip
              key={index}
              className={classes.chips}
              size="large"
              label={user}
              icon={<AccountCircleIcon className={classes.closeIcon} />}
            />
          </TableCell>
        ))}
      </TableRow>
    </div>
  );
};

export default ChipContainer;