TypeError：无法读取未定义的属性“ map”。我该怎么解决？

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
});

在渲染时，请映射期望的数组，以便您执行类似的操作

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

a build script

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] })的状态 如果您对API的响应是数组，则可以按照上述方法进行操作。

但是在您的API响应中，看起来像对象，将对象推入数组gothrough the link