React使用useState报错Cannot access 'variable' before initialization如何解决

报错原因 #

报错ReferenceError: Cannot access 'finalprice' before initialization的中文含义是：引用错误：无法在变量finalprice初始化完成前访问它。
触发错误的根本原因是你在给useState传递初始值的时候，直接引用了还没完成声明的state变量finalprice：

// 错误写法：等号右侧的初始值对象里用到了finalprice，此时这个变量还没被useState返回赋值
const [finalprice,setGCMP1] = useState({
  id: 1,
  title: 'Final Price',
  Quote: '999999',
  SalesOrder: '999999',
  GCMP: finalprice, // 这里finalprice还不存在，直接报错
})

除此之外你的代码还存在两个逻辑问题：

1. 调用setGCMP1更新状态时直接传入了单个数值，会覆盖原有的对象结构，后续无法正常读取GCMP字段
2. 直接把CallAPI组件当做数据传给material-table的data属性，data要求接收数组格式的表格数据，不能传入React组件

完整修复步骤 #

步骤1：调整CallAPI.js的逻辑封装 #

把状态和请求逻辑封装成自定义Hook，方便和表格组件共享数据：

import Axios from "axios";
import React, { useState } from "react";
import './ButtonLogs.css';

export function useFinalPriceData() {
  const [DPID, setText] = useState('');
  // 初始值不要引用未声明的变量，GCMP给默认占位值
  const [finalprice, setGCMP1] = useState({
    id: 1,
    title: 'Final Price',
    Quote: '999999',
    SalesOrder: '999999',
    GCMP: '999999',
  });

  const gcmpapi = `https://blablabla/${DPID}/blablabla`;

  const callgcmpapi = () => {
    Axios.get(gcmpapi).then((response) => {
      const finalPriceVal = response.data.Data.PurchaseSummary.PriceSummary.FinalPrice;
      // 更新状态时保留原有对象结构
      setGCMP1(prev => ({
        ...prev,
        GCMP: finalPriceVal
      }));
    })
  };

  // 导出触发请求的按钮组件和数据
  const TriggerButton = () => (
    <div className='MainButton'>
      <button className="button button1" onClick={callgcmpapi}>Extract API results</button>
    </div>
  );

  return {
    finalprice,
    TriggerButton
  }
}

步骤2：修复MTable.js的数据传递逻辑 #

import MaterialTable from 'material-table';
import { useFinalPriceData } from "./CallAPI";

const MTable = () => {
  const { finalprice, TriggerButton } = useFinalPriceData();
  const columns = [
    { title: 'GCMP (DPID)', field: 'GCMP' }
  ];
  // 把数据包装成material-table要求的数组格式
  const tableData = [finalprice];

  return (
    <div style={{ maxWidth: '100%' }}>
      <TriggerButton />
      <MaterialTable columns={columns} data={tableData} title='Endpoints Directory' />
    </div>
  );
};

export default MTable;

内容的提问来源于stack exchange，提问作者Raiden Choong