我的函数generateSeriesDataWithColor（）似乎在呈现组件或页面之前没有加载。
因此，当加载组件时，seriesWithColor应该立即获取generateSeriesDataWithColor（）生成的数据，但在第一次呈现时不会生成数据，相反，如果再次呈现组件，则会显示颜色和图形。

import HighchartsReact from "highcharts-react-official";
    import Highcharts from "highcharts";
    import './SkillsGraph.scss';
    import { Col, Row } from "react-bootstrap";
    import HeadingMain from "../../Heading/HeadingMain/HeadingMain";

    export default function SkillsGraph(){

    const skills = ['HTML5/CSS3/JS', 'Java11', 'PHP', 'MySql', 'MongoDB', 'ReactJS', 'ExpressJS'];
    const series = {
        name: 'Skill Level', 
        data: [ 10, 9.5, 7, 9.5, 8, 8.5, 8]
    };

    const seriesWithColor = generateSeriesDataWithColor(series); // This is where the series is assigned to the var

    // Randomly generate colors 
    function generateRandomColor(){
        let maxVal = 0xFFFFFF; // 16777215
        let randomNumber = Math.random() * maxVal; 
        randomNumber = Math.floor(randomNumber);
        randomNumber = randomNumber.toString(16);
        let randColor = randomNumber.padStart(6, 0);   
        return `#${randColor.toUpperCase()}`
    }

    // Generate the data with random conlor
    function generateSeriesDataWithColor(seriesData){

        const data = seriesData.data;

        const dataArray = data.map((item) => {
            let color = generateRandomColor();
            while(color === "#FFFFFF"){
                color = generateRandomColor();
            }

            let dataObj = {
                y: item,
                color: color
            }

            return dataObj;
        })

        let seriesWithColor = {
            name: 'Skill Level',
            data: dataArray
        }

        return seriesWithColor; //This is from where the data/series is returned
    }

    // Options for the graph
    let options = {
        chart: {
            type: 'bar',
            height: 400
        },
        title: {
            align: 'left',
            text: 'Skills represented'
        },
        xAxis: {
            categories: skills,
            visible: true,
            type: 'Skills categorised',
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            max: 10,
            title: {
                text: 'Skill Level',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: false
                }
            },
            column: {
                colorByPoint: true
            }
        },
        colors: [
            '#ff0000',
            '#00ff00',
            '#0000ff',
            '#0000ff',
            '#0000ff',
            '#0000ff',
            '#0000ff'
        ],
        legend: {
            enabled: true
        },
        credits: {
            enabled: false
        },
        series: seriesWithColor // This is where the generated data/series is used
    } 

    return (
        <Row>
            <Col md={3}>
                <HeadingMain name="This is Legend"></HeadingMain>
            </Col>
            <Col md={9}>
                <HighchartsReact highcharts={Highcharts} options={options} className="chart"></HighchartsReact>
            </Col>
        </Row>
    )
    }

有人能解决这个问题吗？
我尝试使用useEffect钩子来完成想要的任务，但是它给出了一个错误消息-“React钩子useEffect缺少依赖项：'generateSeriesDataWithColor'和'series'。请包含它们或移除相依性数组react-hooks/exhaustive-deps '。（请检查下列程式码）

const [seriesWithColor, setSeries] = useState(null);

useEffect(() => {
    generateSeriesDataWithColor(series)
    .then(data => setSeries(data))
    .catch(err => console.log(err));
}, []);