Javascript TypeError:无法读取属性'；0'；使用状态时的未定义属性

我在尝试将Axios响应数据传递到组件时遇到问题。在componentDidMount期间的控制台日志中，它将正常记录，但对于引用和取值状态，它表示无法读取undefined的属性0

我认为这与dom呈现之前未加载数据有关，导致错误。然而，我在网上看到的一切似乎都表明，这是正确的处理方式

import React, { Component } from 'react';
import Header from './components/header.js';
import Home from './components/home.js';
import './App.css';
import Axios from 'axios';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sqlClosed: [],
      sqlClosedRebill: [],
      sqlPotential: [],
      sqlPotentialRepeat: [],
      sqlRebill: [],
      sqlRepeat: [],
      loaded: false,
    };
  }

  componentDidMount() {
    Axios.get('url', {
      headers: { 'Content-Type': 'application/json' },
      data: {},
    })
      .then((response) => {
        this.setState({
          sqlClosed: response.data.result.sqlClosed,
          sqlClosedRebill: response.data.result.sqlClosedRebill,
          sqlPotential: response.data.result.sqlPotential,
          sqlPotentialRepeat: response.data.result.sqlPotentialRepeat,
          sqlRebill: response.data.result.sqlRebill,
          sqlRepeat: response.data.result.sqlRepeat,
        });
        this.setState({ loaded: true });
        console.log(this.state.sqlClosed.recordset[0].sQuoteType);
      })
      .catch((error) => {
        console.log(error);
      });
  }

  render() {
    return (
      <>
        <Header />
        <Home
          quote={this.state.sqlClosed.recordset[0].sQuoteType}
          value={this.state.sqlClosed.recordset[0].nCount}
        />
      </>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“./components/Header.js”导入标题；
从“./components/Home.js”导入Home；
导入“/App.css”；
从“Axios”导入Axios；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
sqlClosed:[]，
sqlClosedRebill:[]，
sqlPotential:[]，
sqlPotentialRepeat:[]，
sqlRebill:[]，
sqlRepeat:[]，
加载：false，
};
}
componentDidMount（）{
get（'url'{
标题：{'Content-Type'：'application/json'}，
数据：{}，
})
。然后（（响应）=>{
这是我的国家({
sqlClosed:response.data.result.sqlClosed，
sqlClosedRebill:response.data.result.sqlClosedRebill，
sqlPotential:response.data.result.sqlPotential，
sqlPotentialRepeat:response.data.result.sqlPotentialRepeat，
sqlRebill:response.data.result.sqlRebill，
sqlRepeat:response.data.result.sqlRepeat，
});
this.setState（{loaded:true}）；
console.log（this.state.sqlClosed.recordset[0].sQuoteType）；
})
.catch（（错误）=>{
console.log（错误）；
});
}
render（）{
返回(
);
}
}
导出默认应用程序；

问题在于，在第一次渲染时，数组都是空的。我确实看到您在那里有一个标志（

已加载

）来指示数据加载的时间。为什么不好好利用它呢

  render() {
    return (
      <>
        <Header />
       {this.state.loaded && 
        <Home
          quote={this.state.sqlClosed.recordset[0].sQuoteType}
          value={this.state.sqlClosed.recordset[0].nCount}
        />
       }
      </>
    );
  }

render（）{
返回(
{this.state.loaded&&
}
);
}

问题在于，在第一次渲染时，数组都是空的。我确实看到您在那里有一个标志（

已加载

）来指示数据加载的时间。为什么不好好利用它呢

  render() {
    return (
      <>
        <Header />
       {this.state.loaded && 
        <Home
          quote={this.state.sqlClosed.recordset[0].sQuoteType}
          value={this.state.sqlClosed.recordset[0].nCount}
        />
       }
      </>
    );
  }

render（）{
返回(
{this.state.loaded&&
}
);
}