Javascript ReactJS TypeError:undefined不是函数（接近'；…this.state.data.map…'；）

我对React还不熟悉，并试图学习它。我从API获取数据，我将使用这些数据。它返回基于“美元”的货币利率。我将使用该数据转换货币，但我得到以下错误：

我不知道是什么问题

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;

import React，{Component}来自'React'；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）
this.state={data:'false'}；
}
componentDidMount（）{
这是getData（）；
}
getData=（）=>{
取回（“https://openexchangerates.org/api/latest.json?app_id=88a3d2b24b174bf5bec485533a3bca88")
。然后（响应=>{
if（response.ok）{
返回响应；
}否则{
让错误消息=
“${response.status（${response.statusText}）”，
错误=新错误（错误消息）；
抛出（错误）；
}
})
.then（response=>response.json（））
。然后（json=>{
log（json）；
this.setState（{data:json.data}）
});
}
render（）{
返回(
反应应用程序
{
这个.state.data&&
this.state.data.map（（项，键）=>
{item}
)}
);
}
}
导出默认应用程序；

---

谢谢您的时间。

将状态中的初始数据属性设置为空数组

[]

。 字符串化的“false”计算结果为true，这就是为什么它尝试调用map函数，但字符串没有map函数

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

---

工作示例

将处于状态的初始数据属性设置为空数组

[]

。 字符串化的“false”计算结果为true，这就是为什么它尝试调用map函数，但字符串没有map函数

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

---

工作示例

因为

此.state.data

不是

数组

，而是

字符串

只需使用下面的代码并从

render

方法中删除

this.state.data&&

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

---

因为

此.state.data

不是

数组

，所以它是

字符串

只需使用下面的代码并从

render

方法中删除

this.state.data&&

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

---

---

您应该尝试使用

false

而不是字符串

'false'

来控制台log

this.state

初始化state，或者更好地按照@ztadic91的建议清空数组。由于最初

this.state.data

是truthy，它会在从

getData

获取结果之前尝试渲染。state={data:'false'}；到this.state={data:[]}；在得到结果之前它是如何尝试渲染的。我没有得到它。@cubbukOn initial render，因为'this.state.data'是真实的；操作数的第二部分&&也将被执行。因此我猜您假设在初始渲染时，该部分不会被渲染，但它仍然会渲染。您应该尝试控制台log

this.state

initialize state with

false

不是字符串

'false'

，或者不如像@ztadic91建议的那样清空数组。因为最初

这个.state.data

是真实的，所以它会在从

getData

获取结果之前尝试渲染。将这个.state={data:'false}更改为this.state={data:[]}；在得到结果之前它是如何尝试渲染的。我没有得到它。@cubbukOn初始渲染，因为'this.state.data'是真实的；操作数的第二部分&&也将被执行。所以我猜您假设在初始渲染时该部分不会被渲染，但它仍然会渲染。我删除了

this.state.data&

，并使用了code、 它给出了相同的错误。但是现在JSXit中的its没有显示json，但是没有错误。所以它不工作。当删除条件时，它会给出什么错误？相同，但是错误在这里（

this.state.data.map（（item，key）=>

）。可能您正在接收的数据不是数组。它应该是

[{}，{}，{}格式]

。我删除了

this.state.data&&

并使用了该代码。它给出了相同的错误。但现在它在JSXit中没有显示json，但没有错误。因此它不工作。删除条件时会给出什么错误？相同，但错误在这里（

this.state.data.map（（项，键）=>

）现在，您接收的数据可能不是数组。它的格式应该是

[{}，{}，{}]

。