Как получить значение через вложенные объекты в Reactjs - PullRequest
Новая
       94

Как получить значение через вложенные объекты в Reactjs

0 голосов
/ 22 марта 2020

Я новичок в разработке 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. Но когда я go через list.last, я получаю сообщение об ошибке, что

не может прочесть "последний" из неопределенного.

1 Ответ

0 голосов
/ 22 марта 2020

Ваше состояние неверно, так как в качестве ответа у вас есть 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];
  }

Принять мой ответ, если это решит вашу проблему, или дайте мне знать.

...