函数不适用于第一次渲染，而是在后续渲染之后生成系列

Question

我的函数 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 hook 来完成所需的任务，但它给出了一条错误消息 - 'React Hook useEffect 缺少依赖项：'generateSeriesDataWithColor' 和 'series'。包括它们或删除依赖项数组 react-hooks/exhaustive-deps'。（请检查下面的代码）

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

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

Answer 1

您需要调用 useEffect 挂钩中的函数以确保数据可用。

Answer 2

系列需要是对象数组而不是单个对象：

  let options = {
    ...,
    series: [seriesWithColor] // This is where the generated data/series is used
  };

现场演示： https://codesandbox.io/s/highcharts-react-demo-h4r493?file=/demo.jsx

API参考：https://api.highcharts.com/highcharts/series

函数不适用于第一次渲染，而是在后续渲染之后生成系列

Function does not work on first render instead the series is generated after the subsequent renders

highcharts

reactjs

react-hooks

react-state

use-effect