TypeError：使用状态时无法读取未定义的属性“0”答案

【问题标题】：TypeError: Cannot read property '0' of undefined when using stateTypeError：使用状态时无法读取未定义的属性“0”
【发布时间】：2023-03-13 08:45:01
【问题描述】：

我在尝试将 Axios 响应数据传递给组件时遇到问题。在 componentDidMount 期间的控制台日志中，它会记录得很好，但是对于引用和取值状态，它表示它无法读取未定义的属性 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;

【问题讨论】：

标签： javascript sql reactjs jsx

【解决方案1】：

问题是在第一次渲染时你的数组都是空的。我确实看到那里有一个标志 (loaded) 来指示数据何时加载。为什么不好好利用呢？

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

【讨论】：