Question

与 ApexCharts 相比，这更像是一个 React 问题

我正在从 addAnno 调用函数 variables。

每当调用 annotationText 函数时，我都会增加 addAnno 的值。当我在函数内部记录 annotationText 时，它总是记录值 1。但是，当我在函数外部记录它时，它会显示更新的值。

const annotationProps = {
    marker: {
        size: 8,
        fillColor: '#fff',
        strokeColor: 'red',
        radius: 2,
        cssClass: 'apexcharts-custom-class',
    },
    label: {
        borderColor: '#FF4560',
        offsetY: 0,
        style: {
            color: '#fff',
            background: '#FF4560',
        },
        text: 'Comment',
    },
};
const defaultAnnotations = [];
const annotations = defaultAnnotations.map((item) => ({
    x: item.x,
    y: item.y,
    ...annotationProps,
}));

function ApexAnnotations({ data }) {
    const variables = {
        series: data,
        options: {
            chart: {
                id: 'anno',
                height: 350,
                type: 'line',
                events: {
                    dataPointSelection: function (event, chartContext, config) {
                        const x = config.w.config.series[config.seriesIndex].data[config.dataPointIndex]['x'];
                        const y = config.w.config.series[config.seriesIndex].data[config.dataPointIndex]['y'];
                        addAnno(x, y);
                    },
                },
            },
            annotations: {
                position: 'back',
                points: annotations,
            },
            xaxis: {
                type: 'datetime',
                title: {
                    text: 'Month',
                },
            },
            markers: {
                size: 5,
            },
            tooltip: {
                intersect: true,
                shared: false,
            },
        },
    };
    const [chartData, setChartData] = useState(variables);
    const [annotationText, setAnnotationText] = useState(1);

    const addAnno = (x, y) => {
    const newAnnotation = {
        x: new Date(x).getTime(),
        y: y,
        ...annotationProps,
    };
    console.log('Inside Function', annotationText);
    setAnnotationText((prevText) => prevText + 1);
    annotations.push(newAnnotation);

    setChartData((state) => ({
        ...state,
        options: {
            ...state.options,
            annotations: {
                ...state.options.annotations,
                points: annotations,
            },
        },
    }));
};

    console.log('Outside Function', annotationText);

    return (
        <Container>
            <Chart options={chartData.options} series={chartData.series} height={400} />
        </Container>
    );
}

export default ApexAnnotations;

Answer 1

您在更新 annotationText 值之前制作内部控制台日志。在此更新实际发生之前，控制台日志无法显示更新的值。
setState 是异步的，所以即使你先执行 setAnnotationText((prevText) => prevText + 1);然后console.log，控制台中显示的值仍然是“前一个”值。它还不会更新。
您在函数外制作的控制台日志正在获取初始值 1。当您单击按钮并更新 annotationText 值时，状态更改、组件重新渲染和函数外的控制台日志显示状态的更新版本。此时函数中的值也会更新，但不再调用函数，因此没有控制台来比较结果。

在函数中使用 setState 更新状态。但是，当我在函数内部记录状态时，它显示了初始状态

1 个答案: