javascript - map 不是列表中的函数

Question

我发出一个返回简单列表的请求，我正在尝试与表中的此列表进行交互，但出现以下错误。

Uncaught TypeError: this.state.sistemas.map is not a function at 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 在 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'},

]

Answer 1

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

<小时/>

您的 API，http://www.mocky.io/v2/5acaa5562e00004900bba9f7返回无效的 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', '}'