Javascript 停止在材质界面中同时更改图标

我在表格中有一个图标列表，当单击该图标时，整个图标列表将更改为另一个图标。我应该如何阻止他们同时改变

代码：

从“React”导入React；
从“@materialui/core/styles”导入{makeStyles，Theme}”；
从“@material ui/core/Table”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableContainer”导入TableContainer；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TablePagination”导入TablePagination；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/TableSortLabel”导入TableSortLabel；
从“@material ui/core/IconButton”导入IconButton；
从“@material ui/core/Tooltip”导入工具提示；
从“@material ui/icons/FilterList”导入FilterListIcon；
从“@material ui/icons/FavoriteBorderOutlinedIcon”导入FavoriteBorderOutlinedIcon；
从“@material ui/icons/FavoriteOutlinedIcon”导入FavoriteOutlinedIcon；
...
导出默认函数表（）{
...
const[isFavorite，setIsFavorite]=React.useState（false）；
...
返回(
...
返回(
{row.name}
...
setIsFavorite（！isFavorite）}>
{isFavorite？：}
...
);
}

每次单击都会切换您的状态isFavorite。要获得所需的功能，您需要在图标对象上具有favorite属性。以下是一个示例：

const [iconData, setIconData] = useState([
  {icon: someIcon, id: 1, isFavorite: false},
  {icon: diffIcon, id: 2, isFavorite: false},
  {icon: thirdIcon, id: 3, isFavorite: false}
])

在return语句中，您需要映射到iconData

iconData.map(icon => (
<TableCell key={icon.id}>
    <IconButton onClick={() => iconFavChange(icon.id)}>
      {icon.isFavorite ? <FavoriteOutlinedIcon color="secondary"/> :  
           <FavoriteBorderOutlinedIcon color="action"/> }
     </IconButton>
</TableCell>
))

编辑：

行数据保存在组件外部的常量中。我添加了一个状态片，并将行设置为初始状态

我在您的行数据中添加了isFavorite属性

我添加了一个favorite处理程序。它以arg命名，在数据上循环并切换isFavorite属性

更新了图标组件

handleFavoriteTokle（row.name）}>
{row.isFavorite？（）
: ()}

将参数从行更改为状态的数据片

{stableSort（数据，getComparator（order，orderBy））
.slice（第页*rowsPerPage，第页*rowsPerPage+rowsPerPage）
.map（（行，索引）=>{

你能将你的代码上传到codesandbox吗？你需要提供更多的上下文和更清晰的代码。它们仍然在变化，我不确定我做错了什么。现在我正在尝试将每个单元格设置为自己的状态，但我不确定如何在Material UI中自定义TableCell组件…@Zonahmm你能将你的代码添加到codesandbox吗对不起，我是codesandbox的新手。这行吗？@Zonahmm是的，但看起来您可能忘记保存了，因为其中一个文件是空的。@Zonahmm是的，请查看我的fork。上面的编辑说明。

const iconFavChange =(id)=> {
 let updatedIconData = iconData.map(icon => icon.id === id ? icon.isFavorite = !icon.isFavorite : icon)
// map over existing state data and if the id in args matches id of icon,
//then toggle the isFavorite property
 setIconData(updatedIconData)
}

const [data, setData] = React.useState(rows);

isFavorite: boolean;

const handleFavoriteToggle = name => {
    console.log(name);
    let updatedData = data.map(row => {
      if (row.name === name) {
        row.isFavorite = !row.isFavorite;
      }
      return row;
    });
    setData(updatedData);
  };

<IconButton onClick={() => handleFavoriteToggle(row.name)}>
    {row.isFavorite ? (<FavoriteOutlinedIcon color="secondary" />)
                    : (<FavoriteBorderOutlinedIcon color="action" />)}
</IconButton>

<TableBody>
            {stableSort(data, getComparator(order, orderBy))
              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
              .map((row, index) => {