3
votes

Comment réparer "TypeError: items.map n'est pas une fonction" lorsque vous travaillez avec React et les API?

Je suis nouveau dans React et j'essaie d'extraire des informations d'une API, mais continuez à recevoir cette erreur lorsque vous utilisez la fonction .map pour transmettre les données récupérées dans un tableau:

TypeError: items.map n'est pas une fonction.

Je ne suis pas trop familier avec JavaScript, donc je ne comprends pas tout à fait ce qui se passe ici. J'ai inclus mon code:

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

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

  componentDidMount() {
    fetch("http://www.colr.org/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

0 commentaires

3 Réponses :

1
votes

Puisque vous ne spécifiez aucun type pour quoi que ce soit et qu'il n'est pas vraiment clair (même pas pour un lecteur humain) que items est un Array , vous devriez dire explicitement TypeScript pour l'utiliser comme tableau.

Vous utilisez Assertion de type à cette fin. Cela devrait être quelque chose comme:

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

Cependant, comme bonne pratique, vous devez toujours spécifier explicitement le type de tout ce que vous déclarez. De cette façon, tout ce qui se trouve dans votre base de code sera typé statiquement. Pour tout ce qui vient de l'extérieur (comme les demandes d'API), vous devez convertir les informations en interface s que vous définissez.

0 commentaires

4
votes

Étant donné que le tableau items dans l'état est initialement un tableau vide, vous obtenez cette erreur lorsque vous remplacez items par quelque chose qui n'est pas un tableau.

En regardant la réponse de l'API à votre question, vous obtiendrez un objet de votre JSON après l'avoir analysé. Le tableau que vous souhaitez utiliser dans la réponse se trouve sous la propriété colors , et chaque élément de ce tableau a des propriétés id et hex . p>

class App extends Component {
  // ...

  componentDidMount() {
    fetch("http://www.colr.org/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>);

    // ...
  }
}

0 commentaires

0
votes

Tholle a tout à fait raison en ce qui concerne votre problème spécifique ... Je nettoierais davantage votre code comme ceci:

import React, { Component } from 'react';

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

  componentDidMount() {
    fetch('http://www.colr.org/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;

0 commentaires