CLOSED -React: ReferenceError: Cannot access 'variable name' before initialization- Using [React Hook]

Question

我是 React 的新手。我正在尝试创建一个包含数据数组的 table，要显示的数据使用 set 方法从多维数组中检索特定值。我正在使用 useState 和 Axios 调用 API。我还为 tablet UI 导入了一个名为 'material-table' 的组件。但是，每当尝试显示数组

中的变量时，我都会收到一条错误消息，显示“ReferenceError：在初始化 之前无法访问 'finalprice'”

这是我的 2 个主要 JS 文件。
CallAPI.js是主要用来检索API数据的函数文件。
Mtable.js是组件table从API文件中导入数据并插入materialtable.

CallAPI.js 文件:

 import Axios from "axios";
 import React, { useState, Component } from "react";
 import { StyleSheet, TextInput, SafeAreaView } from 'react-native';
 import './ButtonLogs.css';


class ComponentMain extends Component{
  render(){
    return(
      <div>

        </div>
    )

  }

}

function CallAPI () { 

const [DPID, setText] = useState('');
const [Quote, setText1] = useState('');

let gcmpapi =
  "https://blablabla/"+ DPID +"/blablabla"; // declare a variable to store the URL

const [finalprice,setGCMP1] = useState({
  id: 1,
  title: 'Final Price',
  Quote: '999999',
  SalesOrder: '999999',
  GCMP: finalprice, // <===== this is where cause the page throwing the error message.
    },) // declare a variable to store the array
      
   const callgcmpapi = () => { //assign a variable for a call function
           Axios.get (gcmpapi).then(
             (response) => {
             console.log(response);
             setGCMP1(response.data.Data.PurchaseSummary.PriceSummary.FinalPrice); // call the value from the multi-dimensional array
                  })
              };
        
      return ( 

    (<div className='MainButton'>
        <button class="button button1"onClick={() =>{
            callgcmpapi()
          }}>Extract API results</button>
        </div>
    );
    }

export {CallAPI};
export default ComponentMain;

MTable.js 文件:

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

const MTable = () => {
    //...
  
  const columns = [
    { title: 'GCMP (DPID)', field: 'GCMP' }
  ];

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

};

  export default MTable;

错误信息： ReferenceError: Cannot access 'finalprice' before initialization

Answer 1

你做错了，你必须用一些值初始化，分离出两个依赖状态，
你做错了用自己初始化并声明

const [DPID, setText] = useState('');
const [Quote, setText1] = useState('');

const [finalprice,setFinalprice] = useState("YOUR FINAL PRICE")

const [GCMP1,setGCMP1] = useState({
  id: 1,
  title: 'Final Price',
  Quote: '999999',
  SalesOrder: '999999',
  GCMP: finalprice, 
    }) 

let gcmpapi =
  "https://blablabla/"+ DPID +"/blablabla"; // declare a variable to store the URL

CLOSED -React: ReferenceError: Cannot access 'variable name' before initialization- Using [React Hook]

CLOSED -React: ReferenceError: Cannot access 'variable name' before initialization- Using [React Hook]

api

multidimensional-array

reactjs

fetch-api

react-hooks