ReactJS TypeError:undefined不是一个函数(接近' ... this.state.data.map ...')

时间:2018-03-02 14:12:44

标签: javascript reactjs fetch

我是React的新手,并试图学习它。我从API获取数据,我将使用数据。它返回基于' USD'的汇率。我将使用该数据进行转换,但我收到此错误: Error here

我不知道问题所在。

import React, { Component } from 'react';
import './App.css';


class App extends Component {

    constructor (props) {
        super(props)
        this.state = {data: 'false'};
    }

    componentDidMount(){
        this.getData();
    }

    getData = () => {
        fetch("https://openexchangerates.org/api/latest.json?app_id=88a3d2b24b174bf5bec485533a3bca88")
            .then(response => {
                if (response.ok) {
                    return response;
                } else {
                    let errorMessage =
                        '${response.status(${response.statusText})',
                  error = new Error(errorMessage);
                  throw(error);
                 }
                })
                .then(response => response.json())
                .then(json =>{
                   console.log(json);
                   this.setState({ data: json.data })
                });

    }

  render() {



    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">React App</h1>
        </header>

          {
              this.state.data &&
              this.state.data.map( (item, key) =>
                  <div key={key}>
                      {item}
                  </div>
              )}

      </div>
    );
  }
}

export default App;

感谢您的时间。

2 个答案:

答案 0 :(得分:1)

将状态中的初始数据属性设置为空数组[]。 字符串化&#39; false&#39;求值为true,这就是为什么它试图调用map函数,但是string没有map函数。

 constructor (props) {
        super(props)
        this.state = {data: []};
    }

工作示例here

答案 1 :(得分:0)

由于this.state.data不是array,因此它是string

只需使用以下代码,然后从this.state.data &&方法移除render

constructor (props) {
    super(props)
    this.state = {
        data: []
    };
}