bounty将在5天后过期。回答此问题可获得+100声望奖励。LOTUSMS正在寻找规范答案。
我已经使用了一个Map功能一百万次,但这是逃避我。
- 我有一个 accordion ,Map出图表标题,所以我可以选择我想要的-作品
- 一旦我选择了一个图表,它显示在查看器网络上,它-工程
- 如果我想保存这个到我的pinnedcharts集合,我点击大头针,它会将其添加到pinnedcharts数组-工作-排序
问题:
如果你检查控制台,pinnedcharts数组实际上包含不同的图表(取决于你固定的图表数量)。但是在屏幕上,所有的图表都是相同的(当前)图表。
您必须查看下面链接的codepen才能更好地理解这一点,但这里是Map
{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}上的错误与无法Map它有关,这是有道理的,因为wbrdata是一个对象,而不是数组,但它在查看器上工作,它知道如何通过chartsjs的构造来选择wbrdata中的数据集
如果您看到标题和ID已正确Map。而不是数据集
我很感激任何帮助
CODEPEN的
3条答案
按热度按时间wooyq4lh1#
将
chart
直接传递给pinnedCharts.map
中的Line组件data
prop就可以了。在快速查看您提供的codesandbox之后,chart对象上的
wbrdata
属性不存在的原因是因为它从未作为新属性添加到固定的图表中。相反,它作为一个完整的图表对象附加到固定图表列表中,当您Map
pinnedCharts
数组时可以访问该列表。希望这对你有帮助。
vvppvyoh2#
Here is fixed version
当你需要从
map
中使用chart
变量时,你传递了wbrdata
。字符集
ugmeyewa3#
看起来你遇到了一个问题,当你将一个新的图表固定到pinnedcharts数组时,图表的状态没有正确更新。
这个问题可能是由于React中Chart.js的Line组件没有为每个单独的图表接收正确的数据属性,或者应用程序中的状态管理可能有问题。
字符集
希望这可以帮助你!!