Javascript 映射不是列表中的函数

我发出一个返回一个简单列表的请求，我试图在一个表中与这个列表交互，但是我遇到了以下错误

未捕获类型错误：this.state.sistemas.map不是函数 在App.render上（App.js:46）

我的组成部分：

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

import axios from 'axios';

class App extends Component {

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

    this.handleClick = this.handleClick.bind(this)
  }

  componentDidMount = () => {
    axios.get('http://www.mocky.io/v2/5acaad042e00004d00bbaa07')
      .then(function (response) {
        this.setState({ sistemas: response.data });
        console.log('Response', response.data);
      }.bind(this))
  }

  handleClick = () => {
    console.log('Indo buscar dados');
    axios.get('http://www.mocky.io/v2/5acaad042e00004d00bbaa07')
      .then(function (response) {
        this.setState({ sistemas: response.data });
      }.bind(this))
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <button className='button' onClick={this.handleClick}>
          Click Me
      </button>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <div>
          <ul>
            {this.state.sistemas.map(sistema =>
              <li key={sistema.id}>{sistema.nome}</li>
            )}
          </ul>
        </div>
      </div>
    );
  }
}

export default App;

@编辑

我在promise的解析中添加了console.log，以显示response.data的结果

console.log in componentDidMount返回：

Response:  [
{id: '1', nome: 'Sistema 01'},
{id: '2', nome: 'Sistema 02'},
{id: '3', nome: 'Sistema 03'},
{id: '4', nome: 'Sistema 04'},
{id: '5', nome: 'Sistema 05'},
{id: '6', nome: 'Sistema 06'},
{id: '7', nome: 'Sistema 07'},
{id: '8', nome: 'Sistema 08'},
{id: '9', nome: 'Sistema 09'},
{id: '10', nome: 'Sistema 10'},
{id: '11', nome: 'Sistema 11'},

---

]检查数据数组的语法。我认为等号弄乱了数据结构

---

您的API返回无效的JSON

[
    {id = '1', nome = 'Sistema 01'},
    {id = '2', nome = 'Sistema 02'},
    {id = '3', nome = 'Sistema 03'},
    {id = '4', nome = 'Sistema 04'},
    {id = '5', nome = 'Sistema 05'},
    {id = '6', nome = 'Sistema 06'},
    {id = '7', nome = 'Sistema 07'},
    {id = '8', nome = 'Sistema 08'},
    {id = '9', nome = 'Sistema 09'},
    {id = '10', nome = 'Sistema 10'},
    {id = '11', nome = 'Sistema 11'},

]

Error: Parse error on line 2:
[    {id = '1', nome = 'Si
------^
Expecting 'STRING', '}'

---

你确定

response.data

是一个数组，而不是字符串或对象吗？console.log（'response:'，response.data）返回响应：[{id='1'，nome='Sistema 01'}，{id='2'，nome='Sistema 02'}，{id='3'，nome='Sistema 03'}，{id='4'，nome='Sistema 04'}，{id='5'，nome='Sistema 05'}，{id='6'，nome='Sistema 06'}，{id='7'，nome='Sistema 07'}，{id='8'，nome='Sistema 08'}，{id='9'，nome='Sistema 09'}，{id='10'，nome='Sistema 10'}，{id='11'，nome='Sistema 11'}，]我看到您的更新，后面的

，

不是有效的JSON。我建议您在编写API的任何代码中寻找对象->JSON转换器，它看起来像是您试图自己生成JSON，这是不推荐的。请在google搜索

[API语言]json序列化

我已经更正了json，但我有以下问题：对象作为React子对象无效（找到：具有键{id，nome}的对象）。如果您打算呈现一组子对象，请改用数组。然后，您需要解决这个问题，正如它所回答的那样，并且只有在您自己无法解决的情况下才开始另一个问题。我相信您可以在google上搜索并找出如何解决该问题error@RafaelAugusto是吗？API现在返回了什么？问题还在继续。我想我的做法有问题。要使其成为有效的json，您需要在所有键和字符串上加双引号，并且需要删除区域中最后一个对象后面的逗号。@RafaelAugusto这是您的json的问题。axios库将尝试将有效的json转换为javascript对象，并将其附加为

 response.data

。在查看前端代码之前，请仔细研究如何将数据正确序列化为JSON我已更正了JSON，但我有以下问题：对象作为React子对象无效（找到：具有键{id，nome}的对象）。如果要呈现子对象集合，请改用数组。