useState初始化报错：Cannot access 'dataState' before initialization 原因及解决

错误原因 #

你遇到的Uncaught ReferenceError: Cannot access 'dataState' before initialization错误，本质是JavaScript变量声明的提升规则导致的：

• const声明的函数/变量不会被提升到当前作用域的顶部
• 你在组件中先调用dataState()初始化dataChart的useState，但dataState函数的定义在这之后才出现，执行到useState(dataState())时，dataState还未被初始化，因此触发报错。

解决方法 #

方法1：调整dataState的定义位置 #

把dataState函数的定义移到调用它的useState之前，确保调用时函数已存在：

// 先定义dataState函数及相关常量
const colorCode = "#0066FF";
const colorFont = "#8E9093";
const dataState = () => ({
  // ... 你的函数原有内容
});

// 再初始化useState
const [dataChart, setDataChart] = useState(dataState());

// 其他state、ref和逻辑代码...

方法2：使用useState的惰性初始化（注意适用场景） #

如果只需要在组件首次渲染时执行一次dataState初始化，可以用惰性初始化语法，避免重复执行初始化逻辑：

const [dataChart, setDataChart] = useState(() => dataState());

注：此方法仅解决初始化阶段的报错，后续仍需通过useEffect监听dataProvinsi、dataKota等依赖state的变化，来更新dataChart的值。

额外优化建议 #

由于dataState的返回值依赖dataProvinsi、dataKota等组件state，每次这些state变化时都需要重新计算，你可以用useMemo缓存计算结果，减少不必要的重复执行：

const colorCode = "#0066FF";
const colorFont = "#8E9093";
// 用useMemo缓存dataState计算结果
const dataState = useMemo(() => ({
  data: {
    dataProv: {
      labels: dataProvinsi.map((o) => o.provinsi),
      datasets: [
        {
          fill: true,
          label: null,
          backgroundColor: colorCode,
          borderColor: colorCode,
          borderWidth: 2,
          borderRadius: 12,
          data: dataProvinsi.map((o) => o.total_street),
        },
      ],
    },
    dataKota: {
      labels: dataKota.map((o) => o.kota),
      datasets: [
        {
          fill: true,
          label: null,
          backgroundColor: colorCode,
          borderColor: colorCode,
          borderWidth: 2,
          borderRadius: 12,
          data: dataKota.map((o) => o.total_street),
        },
      ],
    },
    dataKecamatan: {
      labels: dataKecamatan.map((o) => o.kecamatan),
      datasets: [
        {
          fill: true,
          label: null,
          backgroundColor: colorCode,
          borderColor: colorCode,
          borderWidth: 2,
          borderRadius: 12,
          data: dataKecamatan.map((o) => o.total_street),
        },
      ],
    },
  },
  options: {
    plugins: {
      legend: {
        display: false,
        labels: {
          font: {
            color: colorFont,
          },
        },
      },
    },
    scales: {
      x: {
        grid: {
          display: false,
        },
        beginAtZero: false,
        ticks: {
          color: colorFont,
        },
      },
      y: {
        grid: {
          display: false,
        },
        beginAtZero: true,
        ticks: {
          color: colorFont,
        },
      },
    },
  },
}), [dataProvinsi, dataKota, dataKecamatan, colorCode, colorFont]);

// 初始化useState
const [dataChart, setDataChart] = useState(dataState);

// 依赖变化时自动更新
useEffect(() => {
  setDataChart(dataState);
}, [dataState]);

这样只有当依赖的state或常量变化时，dataState才会重新计算，提升组件渲染性能。

内容的提问来源于stack exchange，提问作者Kia Kalista