Question

我遇到了一个渲染问题，在componentDidMount中，我使用setstate分配json后，使用axios进行get调用

问题是：

当我尝试在渲染中调用json的键时，它们是未定义的。因为在渲染后componentdidmount可以工作。

例如：

    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

要访问对象的属性，可以执行以下操作：

const data = {
    "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"
    }
}

console.log(data.all) // for the all key
console.log(data.account) // for the account key
console.log(data.all.moneyavailable.Formatted)

Answer 2

假设您的json被分配给处于状态jsonData的属性，则可以像下面这样访问该属性：

this.state.jsonData.all.moneyavailable.Formatted

检查以下代码段：

var jsonData = {
  "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"
  }
}

console.log(jsonData.all.moneyavailable.Formatted);
alert(jsonData.all.moneyavailable.Formatted);

jsFiddle： http://jsfiddle.net/AndrewL64/rh8d0aqz/6/

Answer 3

只需将json存储在一个变量中。

var data = { ... json};
console.log(data.all.moneyavailable);

如何在ReactJS中访问JSON键？

3 个答案: