React分布式芯片表单元格，行宽5个单元格

Question

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

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

我用显示芯片阵列

<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>

其中selectedUsersToDelete是useState的值。

我已经尝试了各种方法来循环selectedUsersToDelete中的值，但我无法做出反应来呈现表行宽为5个单元格的表！

此外，在芯片中添加deleteCon和deletehandler会破坏它们。

我正在尝试调整本教程以使用钩子：tut

Answer 1

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;