Javascript TypeError:无法读取null的属性状态

我无法获取状态以外的数据并对其应用映射功能。我一直在找工作

TypeError:无法读取null的属性“financials”

axios获得以下对象，{symbol:“AAPL”，financials:Array（4）}，这就是我使用this.state.financials.financials的原因

class Fundamentals extends Component {
  state = {
    financials: null,
    headers: null
  };

  async componentDidMount() {
    console.log("componentDidMOunt");
    await axios
      .get("https://api.iextrading.com/1.0/stock/aapl/financials?period=annual")
      .then(res => {
        const financials = res.data;
        this.setState({ financials });
        console.log(financials);
      });

    console.log("componentDidMount finished setting the data for the table");
  }

  render() {
    // const headers = this.getHeaders1();
    return (
      <GridContainer>
        <GridItem xs={12} sm={12} md={12}>
          <Card>
            {this.state.financials.financials.map(items => items)} <-- i want to get the data out of state and later put it into a table. 
          </Card>
        </GridItem>
      </GridContainer>
    );
  }
}

类基础扩展组件{
状态={
财务：空，
标题：null
};
异步组件didmount（）{
log（“componentDidMOunt”）；
等待axios
.get（“https://api.iextrading.com/1.0/stock/aapl/financials?period=annual")
。然后（res=>{
const financials=资源数据；
这个.setState（{financials}）；
控制台日志（财务）；
});
log（“componentDidMount完成了表的数据设置”）；
}
render（）{
//const headers=this.getHeaders1（）；
返回(
{this.state.financials.financials.map（items=>items）}组件第一次呈现时，
this.state.financials
为
null
，因为您正在使用
null
初始化它：

state = {
  financials: null,
  headers: null
};

这就是为什么会出现这个错误。下面是一个简单的例子，它复制了这个错误：


var状态={
财务：空，
};
state.financials.financials.map（（）=>{}）；
组件第一次呈现时，
this.state.financials
为
null
，因为您正在使用
null
初始化它：

state = {
  financials: null,
  headers: null
};

这就是为什么会出现这个错误。下面是一个简单的例子，它复制了这个错误：


var状态={
财务：空，
};
state.financials.financials.map（（）=>{}）；
在实际呈现数据之前添加检查


类基础扩展组件{
状态={
财务：空，
标题：null
};
异步组件didmount（）{
log（“componentDidMOunt”）；
等待axios
.get（“https://api.iextrading.com/1.0/stock/aapl/financials?period=annual")
。然后（res=>{
const financials=资源数据；
这个.setState（{financials}）；
控制台日志（财务）；
});
log（“componentDidMount完成了表的数据设置”）；
}
render（）{
const{financials:{financials}}=this.state；
如果（！financials | |）（financials&&！financials.length）{
返回(
)
}
返回(
{financials.map（items=>items）}在实际呈现数据之前添加检查


类基础扩展组件{
状态={
财务：空，
标题：null
};
异步组件didmount（）{
log（“componentDidMOunt”）；
等待axios
.get（“https://api.iextrading.com/1.0/stock/aapl/financials?period=annual")
。然后（res=>{
const financials=资源数据；
这个.setState（{financials}）；
控制台日志（财务）；
});
log（“componentDidMount完成了表的数据设置”）；
}
render（）{
const{financials:{financials}}=this.state；
如果（！financials | |）（financials&&！financials.length）{
返回(
)
}
返回(
{financials.map（items=>items）}该错误是因为React试图在API调用完成之前进行渲染，在这种情况下，
this.state.financials
仍将其初始值
null
分配给它

更改财务报表的默认值，如下所述

state = {
    financials: { financials: [] },
    headers: null
};

最后的代码看起来像

class Fundamentals extends Component {
  state = {
    financials: { financials: [] },
    headers: null
  };

  async componentDidMount() {
    console.log("componentDidMOunt");
    await axios
      .get("https://api.iextrading.com/1.0/stock/aapl/financials?period=annual")
      .then(res => {
         const financials = res.data;
         this.setState({ financials });
         console.log(financials);
      });

      console.log("componentDidMount finished setting the data for the table");
   }

   render() {
     // const headers = this.getHeaders1();
     return (
       <GridContainer>
         <GridItem xs={12} sm={12} md={12}>
           <Card>
             {this.state.financials.financials.map(items => items)} <-- i want to get the data out of state and later put it into a table. 
           </Card>
         </GridItem>
       </GridContainer>
     );
  }
}

类基础扩展组件{
状态={
财务：{财务：[]}，
标题：null
};
异步组件didmount（）{
log（“componentDidMOunt”）；
等待axios
.get（“https://api.iextrading.com/1.0/stock/aapl/financials?period=annual")
。然后（res=>{
const financials=资源数据；
这个.setState（{financials}）；
控制台日志（财务）；
});
log（“componentDidMount完成了表的数据设置”）；
}
render（）{
//const headers=this.getHeaders1（）；
返回(
{this.state.financials.financials.map（items=>items）}该错误是因为React试图在API调用完成之前进行渲染，在这种情况下，
this.state.financials
仍将其初始值
null
分配给它

更改财务报表的默认值，如下所述

state = {
    financials: { financials: [] },
    headers: null
};

最后的代码看起来像

class Fundamentals extends Component {
  state = {
    financials: { financials: [] },
    headers: null
  };

  async componentDidMount() {
    console.log("componentDidMOunt");
    await axios
      .get("https://api.iextrading.com/1.0/stock/aapl/financials?period=annual")
      .then(res => {
         const financials = res.data;
         this.setState({ financials });
         console.log(financials);
      });

      console.log("componentDidMount finished setting the data for the table");
   }

   render() {
     // const headers = this.getHeaders1();
     return (
       <GridContainer>
         <GridItem xs={12} sm={12} md={12}>
           <Card>
             {this.state.financials.financials.map(items => items)} <-- i want to get the data out of state and later put it into a table. 
           </Card>
         </GridItem>
       </GridContainer>
     );
  }
}

类基础扩展组件{
状态={
财务：{财务：[]}，
标题：null
};
异步组件didmount（）{
log（“componentDidMOunt”）；
等待axios
.get（“https://api.iextrading.com/1.0/stock/aapl/financials?period=annual")
。然后（res=>{
const financials=资源数据；
这个.setState（{financials}）；
控制台日志（财务）；
});
log（“componentDidMount完成了表的数据设置”）；
}
render（）{
//const headers=this.getHeaders1（）；
返回(
{this.state.financials.financials.map（items=>items）}看起来您在{this.state.financials.financials.map（items=>items）}中放置了两次财务数据。对不起，我应该澄清一下，axios的数据包含一个嵌套了另一个财务数据的对象。看起来您在{this.state.financials.financials.financials.map（items=>items）}对不起，我应该澄清一下，axios的数据包含一个对象，其中嵌套了另一个财务数据。