【反应图.js】如何使用地图功能向雷达图添加多个数据

Question

我正在尝试弄清楚如何使用地图功能将多个数据放入雷达图。 我选择了一些相关的代码，如下所示。

class TopPage_Comp extends Component{
constructor(props){
super(props)
this.state = {
motivationtypeTestRecords: []
}
}
componentDidMount() {
const id = this.state.user.id
fetch("http://localhost:8080/test/" + id, {
method: "GET"
})
.then((response) => {
response.json().
then(json => {
const types = json.motivationtypeList
this.setState(
{
motivationtypeTestRecords: records,
}
)
})
})
}
render() {
const backgroundColors = [
'rgba(255,99,71,0.35)',
'rgba(0,128,0,0.35)',
'rgba(255,255,0,0.35)'
];
const borderColors = [
'rgba(255,99,71,1)',
'rgba(0,128,0,1)',
'rgba(255,255,0,1)'
];
return(
<>
{this.state.motivationtypeTestRecords.length > 0 &&
<MotivationtypeChart
scores={this.state.motivationtypeTestRecords}
backgroundColors={backgroundColors}
borderColors={borderColors}
/>
}
</>
)
}
}

export class MotivationtypeChart extends Component {
constructor(props){
super(props);
}
render(){
return(
<Radar
data={{
labels: ['Drive', 'Volunteer', 'Create', 'Analyze'],
datasets:[
{this.props.scores.map((s, index) =>
{
label: s.createdDate,
data: [
s.driveScore,
s.volunteerScore,
s.createScore,
s.analyzeScore
],
backgroundColor: this.props.backgroundColors[index],
borderColor: this.props.borderColor[index],
borderWidth: 2
},
)}
]
}}
height={400}
width={500}
options={{
maintainAspectRation: false,
scale: {
grid: {
display: false
},
beginAtZero: true,
min: 0,
max: 20,
stepSize: 1,
}
}}
/>
)
}
}

我正在使用 react-chartjs-2。 当它在MotivationtypeChart组件上调用this.props.scores时，错误反复显示意外的关键字"this"。 是否首先不允许在数据集数组中使用地图功能？ 或者有什么办法解决这个问题吗？ 我真的很感激像这里的人这样的熟练程序员的建议。

Answer 1

我认为您直接在数组中使用map，因此这就是为什么它向您显示错误的原因，而且这不是像这样创建数据的好方法。

因此，请尝试创建新函数，该函数将返回数据，然后使用该函数作为图表中的dataSets返回Radar

export class MotivationtypeChart extends Component {
constructor(props){
super(props);
}
const getRadarData = () => {
return this.props.scores.map((s, index) => {
return {
label: s.createdDate,
data: [s.driveScore, s.volunteerScore, s.createScore, s.analyzeScore],
backgroundColor: this.props.backgroundColors[index],
borderColor: this.props.borderColor[index],
borderWidth: 2
};
});
};
render(){
return(
<Radar
data={{
labels: ['Drive', 'Volunteer', 'Create', 'Analyze'],
datasets:[...getRadarData()]
}}
height={400}
width={500}
options={{
maintainAspectRation: false,
scale: {
grid: {
display: false
},
beginAtZero: true,
min: 0,
max: 20,
stepSize: 1,
}
}}
/>
)
}
}