如何为物料评级组件设置单一状态？

Question

我正在处理一个Web表单，并尝试添加每个有问题的评分表。 这是我的代码当前的样子：

const [racc1, setRacc1] = React.useState(0);
const [racc2, setRacc2] = React.useState(0);
const [racc3, setRacc3] = React.useState(0);
render(){
...
        <RatingStars
          name="simple-controlled"
          ratingQuestion="bla bla bla"
          value={racc1}
          onChange={() => {
            setRacc1(racc1);
          }}
        />
        <RatingStars
          name="simple-controlled2"
          ratingQuestion="bla bla bla"
          value={racc2}
          onChange={() => {
            setRacc2(racc2);
          }}
        />
        <RatingStars
          name="simple-controlled3"
          ratingQuestion="bla bla bla"
          value={racc3}
          onChangeActive={(event, value) => {
            setRacc3(value);
          }}
        />
}

这是我的RatingStar组件：

export default function SimpleRating(props) {
  const [rating, setRating] = React.useState(0);
  function handleValue(event) {
    setRating(event.target.value);
  }

  return (
    <div>
      <Paper className={classes.root}>
        <Box
          component="fieldset"
          mb={3}
          borderColor="transparent"
          className={classes.boxStyle}
        >
          <Typography
            variant="h5"
            component="legend"
            align="left"
            className={classes.typoStyle}
          >
            {props.ratingQuestion}
          </Typography>
          <Rating
            className={classes.ratingStyle}
            align="right"
            name="simple-controlled"
            value={rating}
            size="large"
            onChange={handleValue}
          />
        </Box>
      </Paper>
    </div>
  );
}

当我单击第二个评分时，我遇到问题ag = fter fill the first rating，第二个未设置，并且当我单击第二个和第三个评分时，第一个评分被更改。 只有第一星级的状态正在改变。