【问题标题】:CLOSED -React: ReferenceError: Cannot access 'variable name' before initialization- Using [React Hook]已关闭 -React: ReferenceError: Cannot access 'variable name' before initialization- Using [React Hook]
【发布时间】:2021-12-29 07:31:07
【问题描述】:

我对@9​​87654322@ 很陌生。我正在尝试创建一个包含数据数组的表,并且要显示的数据使用set 方法从多维数组中检索特定值。我使用useStateAxios 来调用API。我还为平板电脑 UI 导入了一个名为 'material-table' 的组件。但是,每当尝试显示数组中的变量时,我都会收到一条错误消息“ReferenceError: Cannot access 'finalprice' before initialization

这是我的 2 个主要 JS 文件。
CallAPI.js 是主要检索API数据的函数文件。
mtable.js 是组件表,用于从 API 文件中导入数据并插入到材料表中。

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

【问题讨论】:

  • 您正在尝试使用finalprice 的值来设置finalprice 的值。当您创建该对象时,您希望 GCMP 属性具有什么值,为什么?它应该有什么价值?
  • 嗨@David,我正在尝试从已设置为setGCMP1 的维度数组中携带值finalprice,并将其声明为数组中的GCMP。有什么建议我可以继续吗?我对 GCMP 的期望输出:12345 setGCMP1的数据

标签: reactjs api multidimensional-array react-hooks fetch-api


【解决方案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

【讨论】:

  • 谢谢@Ashish,这里仍然有问题。我想为GCMP 显示的值来自setGCMP1,因为它从API 的多维数组中获取数据。声明两个从属状态的确切正确方法是什么?我不明白你分享的useState("YOUR FINAL PRICE")setFinalprice 没有被使用。
猜你喜欢
  • 1970-01-01
  • 2021-04-04
  • 2022-01-11
  • 1970-01-01
  • 2022-12-02
  • 2022-09-23
  • 1970-01-01
  • 2023-04-01
  • 2020-10-29
相关资源
最近更新 更多