如何使用react从charts-js映射图表数组

Question

我已经使用了地图功能一百万次，但这却让我无法理解。

• 我有一个手风琴可以绘制图表标题，这样我就可以选择我想要的 - 有效
• 一旦我选择了一个图表，它就会将其显示在查看器网络上 - 有效
• 如果我想将其保存到我的 pinnedcharts 集合中，我单击该图钉，它会将其添加到 pinnedcharts 数组中 - 可行 - 有点

问题：

如果您检查控制台，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 是一个对象，而不是数组，但 wbrdata 在查看器上工作，它知道通过方式选择 wbrdata 内的数据集Chartsjs 是如何构建的

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

我感谢任何高级帮助

密码笔

Answer 1

将

chart

直接传递到

data

内的 Line 组件

pinnedCharts.map

道具应该可以解决问题。

快速查看您提供的代码和框后， 图表对象上的

wbrdata

属性不存在的原因是因为它从未作为新属性添加到固定图表中。

它作为完整的图表对象附加到固定图表列表中，您可以在映射

pinnedCharts

数组时访问该列表。

希望这有帮助。