即使在设置值后，useState 变量也会获取初始 null 值

Question

我正在尝试使用 Chartjs 和 useEffect 生成条形图，我正在调用generateChart方法，在chartS变量中设置新的图表对象。但在初始加载中，如果我单击一个栏，onClick 函数中调用的 filterChart 方法仅具有初始 null 值，但

const dispatch = useDispatch();
const filters = useSelector((state) => {
    return state.filters;
});
const generateChart = () => {
    getData().then((data) => {
        if (chartS) {
            chartS.destroy();
        }
        setChartS(new ChartJS(document.getElementById("chart"), {
            type: "bar",
            options: {
                responsive: true,
                onClick: (e, legendItem) => {
                    if (legendItem[0]) {
                        filterCharts(e.chart, legendItem[0].element.$context.dataIndex);
                    }
                }
            },
            data: chartJsData(data)
        }));
    });
}


useEffect(() => {
    generateChart();
}, [filters]);

上面的图表对象不是从 onClick 调用 filterChart 的生成方法。 filterChart 函数如下，

const [chartS, setChartS] = useState(null);

const filterCharts = (chartObj, index) => {
    console.log("chartS", chartS); /// this is still null though we set that using setChartS in getData function
    if (chartObj?.data?.labels[index]) {
        if (filters && filters.years && filters?.years?.includes(chartObj?.data?.labels[index]) && filters.years.length === 1) {
            return;
        }
        dispatch({
            type: "removeAllAddYear",
            payload: chartObj.data.labels[index]
        });

    }
}

为什么我收到空值而不是在generateChart 函数中更新的新图表对象？