React Chart JS标签数据返回3次,标签不正确。有什么解决办法吗?

我正在学习react,并使用chartjs建立了一个雷达图。一切似乎都很好,但有一件事-我的6个标签中有3个是相同的:

我 console.log() '将数据发送到图表并注意到console.log出现了3次-其中一次标签不正确。

有人知道为什么数据被返回3次,为什么其中一组数据是错误的吗?有人知道怎么解决吗?

我的组件代码如下:

import React from 'react';
import { Radar } from 'react-chartjs';

const PokemonInfo=({pokemon}) => {

    const labels = pokemon.stats.map((info) => {
        return info.stat.name;
    });

    const data = pokemon.stats.map((info) => {
        return info.base_stat;
    });

    let charData = {
        labels: labels,
        datasets: [
            {
                data: data,

            }
        ]
    }

    console.log(charData);

    return (
        <div>
            <Radar data={charData} width="300" height="250" />
        </div>
    )
}

export default PokemonInfo;

编辑更多信息

当这个组件被调用时:

const PokemonModal = ({showModal, closeModal, pokemon}) => {
    if(pokemon && Object.keys(pokemon).length !== 0) {
        return (
            <div>

        <Modal
          show={showModal}
          onHide={closeModal}
        >
          <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title">
              {pokemon !== null ? pokemon.species.name : 'Loading...'}
            </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            { 
                pokemon !== null ? 
                <PokemonInfo pokemon={pokemon} />
                : null
            }
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={closeModal}>Close</Button>
          </Modal.Footer>
        </Modal>
        </div>
        )
    }
  return null;
}