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

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

与 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,};
    console.log('Inside Function',annotationText);
    setAnnotationText((prevText) => prevText + 1);
    annotations.push(newAnnotation);

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

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

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

export default ApexAnnotations;

解决方法

1. 您在更新 annotationText 值之前制作内部控制台日志。在此更新实际发生之前，控制台日志无法显示更新的值。

2. setState 是异步的，所以即使你先执行 setAnnotationText((prevText) => prevText + 1);然后console.log，控制台中显示的值仍然是“前一个”值。它还不会更新。

3. 您在函数外制作的控制台日志正在获取初始值 1。当您单击按钮并更新 annotationText 值时，状态更改、组件重新渲染和函数外的控制台日志显示状态的更新版本。此时函数中的值也会更新，但不再调用函数，因此没有控制台来比较结果。