javascript - ReactJS "Unhandled Rejection (TypeError): this.state.features.map is not a function" - Stack Over

admin管理员组

文章数量:1416651

I'm learning React and now I'm trying to do a get request and list with map but when I run this code they e up with this error "Unhandled Rejection (TypeError): this.state.features.map is not a function". I have already searched this but I do not understand what is going on.

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

class App extends Component {

  constructor() {
    super();
    this.state = {
      features: [{
        id: 1,
        name: 'Test',
        count: 1
      }]
    }
  }

  ponentWillMount() {
    fetch(";)
      .then(response => response.json())
      .then(json => {
        console.log(json);
        this.setState({
          features: json,
        });
      });
    console.log(this.state.features)
      
  }

  render() {
    return (
      <div className="App">
        <ul>
          {
            this.state.features.map(function(feature){
              return (
                <li key={feature.id}><button type="button">Upvote</button> ({feature.count}) <span>{feature.name}</span></li>
              )
            })
          }
        </ul>
      </div>
    );
  }
}

export default App;

I'm learning React and now I'm trying to do a get request and list with map but when I run this code they e up with this error "Unhandled Rejection (TypeError): this.state.features.map is not a function". I have already searched this but I do not understand what is going on.

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

class App extends Component {

  constructor() {
    super();
    this.state = {
      features: [{
        id: 1,
        name: 'Test',
        count: 1
      }]
    }
  }

  ponentWillMount() {
    fetch("http://demo6085176.mockable.io/features")
      .then(response => response.json())
      .then(json => {
        console.log(json);
        this.setState({
          features: json,
        });
      });
    console.log(this.state.features)
      
  }

  render() {
    return (
      <div className="App">
        <ul>
          {
            this.state.features.map(function(feature){
              return (
                <li key={feature.id}><button type="button">Upvote</button> ({feature.count}) <span>{feature.name}</span></li>
              )
            })
          }
        </ul>
      </div>
    );
  }
}

export default App;

• javascript
• reactjs
• ecmascript-6
• fetch-api

Share Improve this question Follow edited Mar 16, 2022 at 7:09 VLAZ 29.2k99 gold badges6363 silver badges8484 bronze badges asked Jun 20, 2017 at 15:45 Salatiel QueirozSalatiel Queiroz 15311 silver badge88 bronze badges 7

• What says console.log(json) ? – Evgeny Sorokin Commented Jun 20, 2017 at 15:46
• 'json' is not defined – Salatiel Queiroz Commented Jun 20, 2017 at 15:47
• You have to wait until fetch finishes... set something like "loading..." and after fetch is done, map it – Andrew Li Commented Jun 20, 2017 at 15:49
• Your problem is solved through proper debugging. Given that json is undefined when you console.log it, then there may be something wrong with the server's output. – E_net4 Commented Jun 20, 2017 at 15:51
• @AndreLi not agree, he doesn't need to wait until fetch. – Evgeny Sorokin Commented Jun 20, 2017 at 15:52

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 4

In your ponentWillMount, just do this:

ponentWillMount() {
   fetch("http://demo6085176.mockable.io/features")
    .then(response => response.json())
    .then(json => {
      console.log(json);
      this.setState({ features: json.features });
   });
}

The response you get from the API is an object which has a key of features which is an array of objects of the data you want.

本文标签：