0
votes

La carte n'est pas définie

J'obtiens toujours cette erreur indiquant que la carte n'est pas définie. J'ai changé mon code à cause d'une erreur de regeneratorRuntime et maintenant je suis coincé avec celui-ci. Toute aide est appréciée!

import React, {Component, useEffect, useState} from 'react'
import axios from 'axios'
require("regenerator-runtime/runtime");

const App = () => {
    const [data, setData] = useState({heroes: []});
    useEffect(() => {
         const fetchData = async () => {
             const result = await axios(
                 'https://api.opendota.com/api/heroStats',
             );
             setData(result.data);
         };
        fetchData();
            }, []);
    return(
        <ul>
            {data.heroes.map(item => (
                <li key={item.id}>
                    <a href={item.name}>{item.localized_name}</a>
                </li>
            ))}
        </ul>
    )
};
export default App

javascript reactjs axios

2 commentaires

vérifier ce que l'appel AJAX renvoie: n'obtiendra probablement pas de tableau "heroes"

Que fait le require (‘regenerator-runtime / runtime’) pour vous?

5 Réponses :

0
votes

Les données renvoyées par cette API ne sont qu'un tableau d'objets. Il n'y a pas de «héros» clés. Alors faites simplement: data.map (item => ... et vous devriez être bon.

2 commentaires

Quand je l'ai changé, il a juste recraché une erreur indiquant que data.map n'est pas une fonction

peu importe, il semble que le commentaire du bas semble l'avoir corrigé!

1
votes

Définissez comme ceci

       useEffect(() => {
         const fetchData = async () => {
             const result = await axios(
                 'https://api.opendota.com/api/heroStats',
             );
           setData({...data, heroes:result.data});
         };
        fetchData();
       }, []);

parce que vous avez passé la variable de tableau heroes à state afin de répartir la variable puis définir les données

setData({...data, heroes:result.data});

0 commentaires

0
votes

cela fonctionnera:

    import React, {Component, useEffect, useState} from 'react'

    import axios from 'axios'
    require("regenerator-runtime/runtime");

    const App = () => {
        const [data, setData] = useState({heroes: []});
        useEffect(() => {
             // Using an IIFE
             ( async () => {
                 const result = await axios(
                     'https://api.opendota.com/api/heroStats',
                 );
                 setData({...data, heroes: result.data || [] });
             })();
           }, []);
        return(
            <ul>
                {data.heroes.map(item => (
                    <li key={item.id}>
                        <a href={item.name}>{item.localized_name}</a>
                    </li>
                ))}
            </ul>
        )
    };
    export default App

2 commentaires

Que fait ici "require (" regenerator-runtime / runtime "?

je viens de modifier le code @ 4156 require ("regenerator-runtime / runtime"); est disponible

0
votes

{data.heroes && data.heroes.map (item => (...

Cela fonctionnera-t-il?

0 commentaires

0
votes

La fonction .map n'est disponible que sur un tableau.

Vérifiez le type de "données" défini et assurez-vous qu'il s'agit d'un tableau.

Ici, les données des héros ne sont pas définies sur "données", vous devez donc les ajouter à "Données"

vous pouvez le faire en utilisant setData ({... data, heroes: result.data});

cela fonctionnera pour vous!

0 commentaires