javascript - How to fix "TypeError: items.map is not a function" when working with React and APIs? - Stack Ove

admin管理员组

文章数量:1364573

I'm new to React and am trying to pull in some information from an API, but keep getting this error when using the .map function to pass the retrieved data into an array:

TypeError: items.map is not a function.

I'm not too familiar with JavaScript, so I don't fully understand what's going on here. I've included my code:

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

class App extends Component {
  constructor() {
    super();
    this.state = {
      items: [],
      isLoaded: true
    };
  }

  ponentDidMount() {
    fetch("")
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          items: json
        });
      });
  }

  render() {
    var { items, isLoaded } = this.state;
    var itemInfo = items.map(item => (
      <div key={item.colors.id}>Hex:{item.colors.hex}</div>
    ));

    if (!isLoaded) {
      return <div>{itemInfo}</div>;
    } else {
      return <div className="App">{itemInfo}</div>;
    }
  }
}

export default App;

I'm new to React and am trying to pull in some information from an API, but keep getting this error when using the .map function to pass the retrieved data into an array:

TypeError: items.map is not a function.

I'm not too familiar with JavaScript, so I don't fully understand what's going on here. I've included my code:

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

class App extends Component {
  constructor() {
    super();
    this.state = {
      items: [],
      isLoaded: true
    };
  }

  ponentDidMount() {
    fetch("http://www.colr/json/colors/random/7")
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          items: json
        });
      });
  }

  render() {
    var { items, isLoaded } = this.state;
    var itemInfo = items.map(item => (
      <div key={item.colors.id}>Hex:{item.colors.hex}</div>
    ));

    if (!isLoaded) {
      return <div>{itemInfo}</div>;
    } else {
      return <div className="App">{itemInfo}</div>;
    }
  }
}

export default App;

• javascript
• reactjs
• error-handling
• typeerror

Share Improve this question Follow edited Mar 10, 2019 at 16:08 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Mar 9, 2019 at 20:50 Laurel LinkLaurel Link 30511 gold badge66 silver badges1717 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Since the items array in state is initially an empty array, you get this error when you change items to something that is not an array.

Looking at the response from the API in your question, you will get an object from your JSON after you parse it. The array you want to use in the response is under the colors property, and each element in this array has id and hex properties.

class App extends Component {
  // ...

  ponentDidMount() {
    fetch("http://www.colr/json/colors/random/7")
      .then(res => res.json())
      .then(res => {
        this.setState({
          isLoaded: true,
          items: res.colors
        });
      });
  }

  render() {
    var { items, isLoaded } = this.state;
    var itemInfo = items.map(item => <div key={item.id}>Hex:{item.hex}</div>);

    // ...
  }
}

Since you do not specify types for anything and it is not really clear (not even for a human-reader) that items is an Array, you should explicitly tell TypeScript to use it as an array.

You use Type Assertion for that purpose. Should be something like:

(items as Array<YourArrayElementType>).map(/* .. */);

However, as a good practice you should always explicitly specify the type of anything you declare. In this way anything within you codebase will be statically typed. For anything ing from the outside (such as API requests) you should cast the information to interfaces you define.

Tholle is absolutely correct as far as your specific problem... I would further clean up your code like so:

import React, { Component } from 'react';

class App extends Component {
  state = { items: [], isLoading: true, error: null };

  ponentDidMount() {
    fetch('http://www.colr/json/colors/random/7')
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoading: false,
          items: json.colors,
        });
      })
      .catch(error =>
        this.setState({ error: error.message, isLoading: false }),
      );
  }

  renderColors = () => {
    const { items, isLoading, error } = this.state;

    if (error) {
      return <div>{error}</div>;
    }

    if (isLoading) {
      return <div>Loading...</div>;
    }

    return (
      <div>
        {items.map(item => (
          <div key={item.id}>Hex: {item.hex}</div>
        ))}
      </div>
    );
  };

  render() {
    return <div>{this.renderColors()}</div>;
  }
}

export default App;

本文标签：