TypeError：無法讀取未定義的屬性“地圖”。 我應該修復什么？

Question

當我嘗試從 api 獲取一些數據時出現錯誤。

然后我搜索了如何解決這個錯誤，但我無法解決。 我想解決這個錯誤。 我不知道為什么我會收到這個錯誤。 我應該如何修復我的代碼？ 請告訴我任何想法。 謝謝你的閱讀！

這是我的錯誤。

TypeError: Cannot read property 'map' of undefined

和消息圖像。

這是我的代碼。

import React,{ Component } from 'react';

class Exchange extends Component {
  constructor(props){
    super(props);
    this.state = {
      isLoaded: false,
      items: [],
    }
  }
  componentDidMount(){
    fetch('https://api.exchangeratesapi.io/latest')
    .then(res => res.json())
    .then(json => {
      this.setState({
        isLoaded: true,
        items: json.items,
      })
    })
    }

    render(){
      var { items,isLoaded } = this.state;

      if(!isLoaded){
        return <div>...Loading</div>;
      }else{
        return (
          <div>
            <ul>
              {items.map(item =>(
                <li key={item.rates}>{item.CAD}</li>
              ))}
            </ul>
          </div>
        )
      }
    }
}

 export default Exchange;

這是使用 api。

Answer 1

我認為您從 api 訪問數據的方式是錯誤的，應該是

this.setState({
    isLoaded: true,
    items: json.rates //json.rates not json.items
});

並且在渲染它時，map 期待一個數組，所以你必須做這樣的事情

<ul>
    {Object.keys(items).map(key => (
        <li key={key}>{key} - {items[key]}</li>
     ))}
</ul>

演示

Answer 2

json 響應中沒有屬性items 。 這就是為什么在以下語句之后未定義項目： items items: json.items 。

此外， map()僅適用於數組。 您調用的 API 的響應不是數組。

您可以修改代碼，例如

this.setState({
    isLoaded: true,
    items: json,
})

和

<ul>              
    <li>{items.rates.CAD}</li>
</ul>

Answer 3

要更改數組this.setState({ items: [...this.state.items, itemsArr] })的 state

但是在您的 API 響應中，似乎 object， 通過鏈接將 object 推入數組