如何使用React Hooks在组件中切换/扩展特定的映射按钮

Question

每次我扩展特定卡时，所有角色卡都会扩展，而当我只想要特定的卡片时。我使用的是使用React-Hooks和Material-ui的星球大战API。

根据我所知道的和阅读的内容，我能够通过Handleclick((事件将索引通过，但是在Hernleclick函数中，我会迷路的地方。我尝试将索引附加到扩展状态，但我会遇到一个错误，说我不能将数字附加到布尔值。我也知道，将组件和映射分开可能是解决方案，这很有意义，但我无法做到。已经有几天了，所以现在我会尽可能地寻求帮助。谢谢。

app.js文件

  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);
  useEffect(() => {
    setLoading(true);
    const fetchData = async () => {
      try {
        const result = await axios.get("https://swapi.co/api/people/");
        setLoading(false);
        // console.log(result.data.results);
        setData(result.data.results);
      } catch (error) {
        console.log("there was an error");
      }
    };
    fetchData();
  }, []);
  return (
    <div className="App">
      <CssBaseline />
      <Typography variant="h1">React Wars</Typography>
      <Icon>star</Icon>
      <MediaCard data={data} />
    </div>
  );
};
export default App;

card.js文件

  const useStyles = makeStyles(theme => ({
    card: {
      width: 200,
      marginBottom: 16
    },
    media: {
      height: 0,
      paddingTop: "56.25%" // 16:9
    },
    expand: {
      transform: "rotate(0deg)",
      marginLeft: "auto",
      transition: theme.transitions.create("transform", {
        duration: theme.transitions.duration.shortest
      })
    },
    expandOpen: {
      transform: "rotate(180deg)"
    },
    avatar: {
      backgroundColor: red[500],
      margin: 0
    },
    card_container: {
      display: "flex",
      maxWidth: 1064,
      flexWrap: "wrap",
      margin: "auto",
      justifyContent: "space-between"
    }
  }));
  const classes = useStyles();
  const [expanded, setExpanded] = React.useState(false);
  function handleExpandClick(index) {
    setExpanded(!expanded);
  }
  const a = props.data.map((data, index) => {
    return (
      <Card className={classes.card} key={index}>
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            marginTop: 16
          }}
        >
          <Avatar aria-label="recipe" className={classes.avatar}>
            {data.name.charAt(0)}
          </Avatar>
          {
            <Typography variant="h5" key={index} style={{ margin: "8px auto" }}>
              {data.name}
            </Typography>
          }
        </div>
        <IconButton
          className={clsx(classes.expand, {
            [classes.expandOpen]: expanded
          })}
          onClick={() => handleExpandClick(index)}
          aria-expanded={expanded}
          aria-label="show more"
        >
          <ExpandMoreIcon />
        </IconButton>
        <Collapse in={expanded} timeout="auto" unmountOnExit>
          <CardContent>
            <Typography paragraph>{data.gender}</Typography>
            <Typography paragraph>{data.eye_color}</Typography>
            <Typography paragraph>{data.height}</Typography>
          </CardContent>
        </Collapse>
      </Card>
    );
  });
  return <div className={classes.card_container}>{a}</div>;
};
export default MediaCard;

更新：

我分开了组件，只能显示每个字符的数据，但仍无法将扩展功能隔离到特定卡上。我创建了一个代码框链接，以查看我的代码，如果有帮助。谢谢。

https://codesandbox.io/embed/determined-frog-p0k8w?fontsize=14

Answer 1

感谢您的帮助。我设置了一个代码框以查看我的代码。到目前为止，我取得的进步只是显示特定字符的数据，但仍然很难理解如何创建映射数据的自己的状态。谢谢

https://codesandbox.io/embed/determined-frog-p0k8w?fontsize=14

更新：我弄清楚了问题是我的代码正确的样式(不确定结构上是否正确，因为我仍在学习，而是功能性的LOL(。该行的排在该行中的所有卡的高度仅增加了该行的高度，因此我控制了每张卡的高度。对我来说，一个快速解决的方法是使卡高度100％，并且似乎可以正常工作。我确实做了一个没有材料UI的扩展，这确实帮助我看到了这个问题，所以感谢您的建议。

如果您在我的代码中看到其他任何东西，可能我做错了或可以做得更好，请告诉我，因为我一直在努力改进。ill附加了下面的两个代码样本。

随着材料-UI的扩展https://codesandbox.io/s/determined-frog-p0k8w?fontsize=14

没有材料-UI扩展https://codesandbox.io/embed/great-burnell-ju158?fontsize=14