0

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

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”。首先是不允许在 datasets 数组中使用 map 函数吗？或者有什么办法可以解决这个问题？我真的很感谢像这里的人这样的熟练程序员的建议。

4

1 回答 1

1

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

因此，请尝试创建将返回数据的新函数，然后使用该函数返回，如图表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,
          }
        }}
      />
    )
  }
}
于 2021-05-20T11:31:56.757 回答