Reactjs usestate不适用于后续组件

但即使我点击了最后三张卡片中的评级星，所有的变化都发生在第一张卡片上，我不知道为什么。我不知道是什么样的问题。你能解释一下吗？我不仅不知道一个简单的展示实现了什么，我想知道为什么，谢谢。 这是我的密码：

import React from "react";
import { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import Grid from "@material-ui/core/Grid";
import DeleteIcon from "@material-ui/icons/Delete";
import Box from "@material-ui/core/Box";
import Typography from "@material-ui/core/Typography";
import Rating from "@material-ui/lab/Rating";

const useStyles = makeStyles({
  title: {
    fontSize: 20,
    textAlign: "center"
  }
});

export default function ColorCard({ title, color, rating, timestamp }) {
  const classes = useStyles();
  const [value, setValue] = useState(rating);

  return (
    <Grid item>
      <Card>
        <Typography className={classes.title}>
          {title}
          <DeleteIcon
            style={{
              float: "right"
            }}
          />
        </Typography>

        <Box
          style={{
            backgroundColor: `${color}`,
            padding: "10%",
            margin: "5%"
          }}
        ></Box>
        <Rating
          name="simple-controlled"
          value={value}
          onChange={(event, newValue) => {
            setValue(newValue);
          }}
        />
        <Typography
          component="legend"
          style={{
            fontSize: "2vw"
          }}
        >
          {value} of 5 stars
          <span
            style={{
              float: "right"
            }}
          >
            {timestamp}
          </span>
        </Typography>
      </Card>
    </Grid>
  );
}

从“React”导入React；
从“react”导入{useState}；
从“@material ui/core/styles”导入{makeStyles}”；
从“@物料界面/核心/卡片”导入卡片；
从“@material ui/core/Grid”导入网格；
从“@material ui/icons/Delete”导入DeleteIcon；
从“@material ui/core/Box”导入框；
从“@material ui/core/Typography”导入排版；
从“@material ui/lab/Rating”导入评级；
const useStyles=makeStyles({
标题：{
尺寸：20，
textAlign：“居中”
}
});
导出默认函数ColorCard（{标题、颜色、等级、时间戳}）{
const classes=useStyles（）；
const[value，setValue]=使用状态（额定值）；
返回(
{title}
{
设置值（新值）；
}}
/>
五颗星的{值}
{时间戳}
);
}

---

完整项目：

问题是由

引起的，谢谢Ryan，我可以通过某种工具检测这个问题吗？比如jest？@juexu我已经在我的回答中添加了文档中解释这方面的部分。我不确定我是否理解你的问题。您似乎没有发现问题的困难，只是难以理解原因。了解问题原因的主要资源是文档，并查看生成的html和
评级
源代码以了解如何管理状态。thanks@RyanCogswell，我开始学习reactjs的Jest测试库，它可以将结果与预期进行比较，所以我只是想知道有什么桥梁可以应用jest测试库。不管怎样，谢谢你们的解释，谢谢
<ColorCard key={color.id} inputName={`ratingFor${color.id}`} ...

<Rating name={inputName} ...