Javascript 如何从图表中映射一组图表js使用REACT

我已经使用了一个 map 功能一百万次，但这是逃避我.

• 我有一架手风琴，可以标出图表的标题，这样我就可以挑选我想要的东西--作品
• 一旦我 Select 了一张图表，它就会把它显示在与它联网的查看器上--Works
• 如果我想要将它保存到我的PinnedChats集合中，我单击该图钉，它会将其添加到PinnedChats数组-Works-某种程度上

问题:

如果您判断控制台，pinnedcharts数组实际上包含不同的图表(取决于您固定的图表数量).但在屏幕上，所有的图表显示的是相同的(当前)图表.

您必须看到下面链接的代码，这样才更有意义，但这里是映射

{pinnedcharts.map((chart, index) => {
    return (
        <Grid item md={6} key={index}>
            <Box>
                <CardContent>
                    <Box>
                        <Grid
                            container
                            spacing={2}
                            direction="row"
                            justifyContent="space-between"
                            alignItems="center"
                          >
                            <Grid item xs>
                              <Typography variant="h5">
                                {chart.title}
                              </Typography>
                            </Grid>
                            <Grid item xs={1}>
                              <IconButton
                                color="primary"
                                size="small"
                                onClick={handlePinnedPin}
                              >
                                {pinned ? <LuPin /> : <LuPinOff />}
                              </IconButton>
                            </Grid>
                        </Grid>
                        <Line options={options} data={wbrdata} /> //{chart.wbrdata} doesn't work.
                    </Box>
                </CardContent>
            </Box>
        </Grid>
    );
})}

{chart.wbrdata}上的错误与无法映射它有关，这是有道理的，因为wbrdata是对象，而不是数组，但它在查看器上工作，它知道通过chartsjs的构造方式 Select wbrdata内的数据集

如果您看到标题和ID被正确映射.而不是数据集

我很感激在进修方面的任何帮助

CODEPEN个