在react.js中的render方法中未定义json元素

Question

我有一个渲染问题，在componentDidMount我使用axios进行get调用，我使用setState分配响应数据。

问题是：当我尝试访问render响应数据时，它们是未定义的，因为componentDidMount在render之后可以工作...

例如：

export default class ShowDetails extends Component { 
    constructor(props) { 
        super(props); 
        this.accountService=new AccountService(); 
        this.state = { 
            account:[] 
        }     
    } 

    componentDidMount() { 
        this.accountService.getAccount().then(r => this.setState({ account: r.data })); 
    } 

    render() { 
        return ( {this.state.account.all.moneyavailable.Formatted} //this is undefined

我已经尝试过将axios调用移到其他地方，但是没有成功

json：

{
  "account": [{
      "saldoDisponibileFormatted": "1.664,57",
      "saldoContabileFormatted": "1.341,10",
      "value": "EUR",
      "debit": false,
      "productAlias": null,
      "bank": "bank",
      "iban": "IT31M0326801017052670700860",
      "moviments": [{
          "causShort": "Commissioni",
          "import": "1,00",
          "sign": "D"
        },

      ],
      "dateUpdate1": "n/d",
      "dateUpdate2": "4/12/2018"
    },

  ],
  "all": {
    "moneyavailable": {
      "Formatted": "1950,82"
    },
    "moneyavailable2": {
      "Formatted": "31627,35"
    },
    "dateUpdate": "4/12/2018"
  }
}

Answer 1

您可以在渲染中添加条件。

  render() { return ( {this.state.account.length && this.state.account.all.moneyavailable.Formatted} 

Answer 2

@ L.Mantega您正在使用promise方法，执行完mount方法后可能需要一些时间才能解决，因此我编写了一些示例代码并能够看到数据渲染方法。

class Hello extends React.Component {
   constructor(props) { 
super(props); 
this.state = { account:[] } 
} 
componentDidMount()
{
this.getAccount().then(x=> this.setState({account:x}));
}
getAccount()
{
return new Promise(function(resolve, reject) {
  setTimeout(function() {
  let data = [
    {
        "saldoDisponibileFormatted": "1.664,57",
        "saldoContabileFormatted": "1.341,10",
        "value": "EUR",
        "debit": false,
        "productAlias": null,
        "bank": "bank",
        "iban": "IT31M0326801017052670700860",
        "moviments": [
            {
                "causShort": "Commissioni",
                "import": "1,00",
                "sign": "D"
            },

        ],
        "dateUpdate1": "n/d",
        "dateUpdate2": "4/12/2018"
    }
];
    resolve(data);
  }, 300);
});
}
  render() {
    return <div>{(this.state.account.length > 0) ? this.state.account[0]["saldoDisponibileFormatted"]:"checking for data " }</div>;
  }
}

Answer 3

 getConti() {
     return new Promise(function(resolve, reject) {
         setTimeout(function() {
             const URL = process.env.REACT_APP_BASE_PATH+process.env.REACT_APP_RESOURCE_CONTI;
             console.log(URL);
             return   axios(URL, {

                 method: 'GET',
                 headers: {
                     'content-type': 'application/json',
                     'preferences' : ''
                 }}
             )
             resolve();
         }, 300);
     });
 }
}