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

Question

我是 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 我得到错误

无法读取 undefined 的 proparty“last”。

Answer 1

您的情况不正确，因为您有 JSON 作为响应，您需要检查 btcinr 键是否存在于您的 items 状态那么你需要在 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];
  }