时间戳

首页 > 解决方案 > Reactjs中如何通过嵌套对象获取值

json - Reactjs中如何通过嵌套对象获取值

问题描述

我是 Reactjs 开发的新手，目前正在从事一个有趣的个人项目。所以我有 JSON 文件，内容是：

{
  "btcinr": {
    "base_unit": "btc",
    "quote_unit": "inr",
    "low": "479200.0",
    "high": "509949.0",
    "last": "500003.0",
    "type": "SPOT",
    "open": 493000.0,
    "volume": "48.0567",
    "sell": "503000.0",
    "buy": "500003.0",
    "at": 1584867246,
    "name": "BTC/INR"
  }
}

我的渲染方法中有以下代码：

import React from "react";

class App extends React.Component {
constructor(props){
  super(props);
  this.state = {
    items : [],
    isLoading: true,
  }
}


  componentDidMount() {
    fetch('JSON API LINK')
    .then(res => res.json())
    .then((data) => {
      this.setState({
         items: data,
         isLoading: false,
        })
    })
    .catch(console.log)
  }

  render() {

const list = this.state.items.btcinr && Object.keys(this.state.items.btcinr);
console.log(list);


    return (
      <div>
        {this.state.isLoading ? <h1>Fetching data </h1> :

            list.map( 
              (ticker) => 
              <li>{ticker}</li>

              )
        }

      </div>
    );}
  }

export default App;

我想要的输出是 last 的值。但是当我通过 list.last 我得到错误

无法读取未定义的丙方“最后”。

标签： jsonreactjsundefined

解决方案

您的条件不正确，因为您将JSON作为响应，并且您需要检查项目状态中是否存在btcinr密钥，然后您需要在btcinr中提供可用的密钥列表。

此代码应该可以解决您的问题：

render() {
const { items } = this.state;
let list = [];
if(items.hasOwnProperty('btcinr')){
  list = Object.keys(items.btcinr);
}
return (
  <div>
    {list.map(ticker => (
      <li>{ticker}</li>
    ))}
  </div>
);}

如果您想获得 btcinr 的最后一个属性，可以使用以下代码：

if(items.hasOwnProperty('btcinr')){
      const last = items.btcinr.last;
  }

如果您想从键列表中获取最后一个索引的值，那么您可以使用以下代码：

if(items.hasOwnProperty('btcinr')){
      list = Object.keys(items.btcinr);
      const last = list[list.length];
  }

推荐阅读