Javascript 行中的增量计数器

我想在单击表中每个人的姓名时增加一个计数器。每个名称都有一个计数器，计数器位于不同的行中

我试着遵循一个与“点击计数器”相关的教程。当我点击其中一个人的名字时，它会影响到所有计数器。我不需要。我在这里分享我的代码。（注意：我使用的是Material UI和React）

UserTable.js

导出默认函数UserTable（props）{
const classes=useStyles（）；
const[count，setCount]=useState（0）；
返回(
名称
电子邮件
点击计数器
行动
{props.users.length>0(
props.users.map（（用户）=>(
设置计数（计数+1）}>
{user.name}
{user.username}
{count}
{
props.editRow（用户）；
}}
>
编辑
&emsp；
props.deleteUser（user.id）}
>
删除
))
) : (
没有用户
)}
);
}

Home.js

导出默认函数Home（）{
const classes=useStyles（）；
常量usersData=[
{id:1，名称：“Tania”，用户名：“floppydiskette”}，
{id:2，名称：“Craig”，用户名：“siliconeidolon”}，
{id:3，名称：“Ben”，用户名：“benisphere”}，
];
const[users，setUsers]=useState（usersData）；
const[editing，setEditing]=使用状态（false）；
const initialFormState={id:null，名称：，用户名：}；
const[currentUser，setCurrentUser]=useState（initialFormState）；
const updateUser=（id，updateUser）=>{
设置编辑（假）；
setUsers（users.map（（user）=>（user.id==id？updateuser:user））；
};
const editRow=（用户）=>{
设置编辑（真）；
setCurrentUser（{id:user.id，name:user.name，username:user.username}）；
};
const addUser=（user）=>{
user.id=users.length+1；
setUsers（[…用户，用户]）；
};
常量deleteUser=（id）=>{
setUsers（users.filter（（user）=>user.id！==id））；
};
返回(
{编辑(
) : (
)}
);
}

您需要（

const[count，setCount]=useState（0）；

）使用与整数值不同的值，因为您的计数器由表中的用户共享

您可以使用一个对象，当单击“增量”时，您可以将计数器保存在一个属性下，该属性是custumer的名称或id，并执行类似操作

setCount（prevState=>{
返回{
…国家，
[UserID]：prevState.UserID？prevState.UserID++:1
}
})

当你读数据的时候

couter[UserID]

您需要（

const[count，setCount]=useState（0）；

）使用与整数值不同的内容，因为您的计数器是从表中的用户共享的

您可以使用一个对象，当单击“增量”时，您可以将计数器保存在一个属性下，该属性是custumer的名称或id，并执行类似操作

setCount（prevState=>{
返回{
…国家，
[UserID]：prevState.UserID？prevState.UserID++:1
}
})

当你读数据的时候

---

couter[UserID]

你能分享一下codesandbox链接吗？一个简单的工作示例可以让你更容易回答你的问题，你提供的示例非常简单large@VyasArpit这是代码沙盒：这个问题已经解决了。你可以从你能分享代码沙盒链接获得参考吗？一个简单的工作示例将使回答你的问题更容易，你提供的示例非常简单large@VyasArpit这是代码沙盒：这个问题已经解决了。你可以从

export default function UserTable(props) {
  const classes = useStyles();

  const [count, setCount] = useState(0);

  return (
    <Grid item xs={6}>
      <TableContainer component={Paper}>
        <Table className={classes.table} aria-label="simple table">
          <TableHead>
            <TableRow>
              <TableCell align="center">Name</TableCell>
              <TableCell align="center">Email</TableCell>
              <TableCell align="center">Click Counter</TableCell>
              <TableCell align="center">Actions</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {props.users.length > 0 ? (
              props.users.map((user) => (
                <TableRow key={user.id}>
                  <TableCell align="center">
                    <Button onClick={() => setCount(count + 1)}>
                      {user.name}
                    </Button>
                  </TableCell>
                  <TableCell align="center">{user.username}</TableCell>
                  <TableCell align="center">{count}</TableCell>
                  <TableCell align="center">
                    <Button
                      variant="contained"
                      color="primary"
                      onClick={() => {
                        props.editRow(user);
                      }}
                    >
                      Edit
                    </Button>
                    &emsp;
                    <Button
                      variant="contained"
                      color="secondary"
                      onClick={() => props.deleteUser(user.id)}
                    >
                      Delete
                    </Button>
                  </TableCell>
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell align="center">No users</TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </TableContainer>
    </Grid>
  );
}

export default function Home() {
  const classes = useStyles();

  const usersData = [
    { id: 1, name: "Tania", username: "floppydiskette" },
    { id: 2, name: "Craig", username: "siliconeidolon" },
    { id: 3, name: "Ben", username: "benisphere" },
  ];

  const [users, setUsers] = useState(usersData);

  const [editing, setEditing] = useState(false);

  const initialFormState = { id: null, name: "", username: "" };

  const [currentUser, setCurrentUser] = useState(initialFormState);

  const updateUser = (id, updatedUser) => {
    setEditing(false);

    setUsers(users.map((user) => (user.id === id ? updatedUser : user)));
  };

  const editRow = (user) => {
    setEditing(true);

    setCurrentUser({ id: user.id, name: user.name, username: user.username });
  };

  const addUser = (user) => {
    user.id = users.length + 1;
    setUsers([...users, user]);
  };

  const deleteUser = (id) => {
    setUsers(users.filter((user) => user.id !== id));
  };

  return (
    <div className={classes.root}>
      <Grid container spacing={3}>
        <UserTable users={users} editRow={editRow} deleteUser={deleteUser} />
        {editing ? (
          <EditUserForm
            setEditing={setEditing}
            currentUser={currentUser}
            updateUser={updateUser}
          />
        ) : (
          <AddUserForm addUser={addUser} />
        )}
      </Grid>
    </div>
  );
}