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

Posted 2023-03-23

【中文标题】TypeError：使用状态时无法读取未定义的属性“0”

【英文标题】：TypeError: Cannot read property '0' of undefined when using state

【发布时间】：2021-02-09 21:29:05

【问题描述】：

我在尝试将 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;

【参考方案1】：

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

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