D'accord, mon problème est que j'essaie de modifier un tableau après avoir récupéré JSON et stocké sous forme de tableau avec des crochets. Comment pourrais-je faire ça?

J'ai essayé d'utiliser un autre .then et d'appeler la fonction que je veux appeler, mais lors de la journalisation du tableau sur la console dans la fonction, cela me donne juste une erreur "impossible de lire la propriété de description undefined error". Une aide? Merci!

const [repos, setRepos] = useState([]);
const [isLoaded, setIsLoaded] = useState(false);
const [error, setError] = useState(null);

function updateDates() {
    var i;
    console.log(repos[1].description);
}

// fetch github repo sorted by updated date and store in repos
useEffect(() => {
    fetch("https://api.github.com/users/benngagne/repos?sort=updated")
    .then(res => res.json())
    .then(
        (result) => {
            setRepos(result);
            setIsLoaded(true);
        },
        
        (error) => {
            setIsLoaded(true);
            setError(error);
        }
        )
    // .then(() => {
    //     updateDates();
    // })
    }, [])
2
benngagne 15 janv. 2021 à 03:28

2 réponses

Meilleure réponse

La mise à jour de l'état est asynchrone et vous essayez d'accéder aux données d'état mises à jour immédiatement après la fonction de mise à jour de l'état (setRepos ()).

Le crochet useEffect est ce que vous devriez rechercher. Définissez le tableau de dépendances de useEffect sur votre état, afin qu'il ne fonctionne que lorsque votre état change. Là, vous pouvez faire vos manipulations de votre nouvel état, faire des fonctions etc.

useEffect(() => {
    if(repos){ //checking if state is not null; to not catch initial state.
    //Do your functions, calculations etc..
    }
},[repos]);
1
Emre A 15 janv. 2021 à 00:41

Comment allez-vous?

Votre code a une erreur dans votre récupération, j'ajoute ces corrections ainsi qu'une classe complète montrant comment parcourir les données entrantes. btw je montre juste la propriété full_name de la réponse, mais vous pouvez également tout récupérer, comme:

const {full_name,description} = repo;

Voici la classe complète:

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

function App() {
  const [repos, setRepos] = useState([]);
  const [isLoaded, setIsLoaded] = useState(false);
  const [error, setError] = useState(null);

// fetch github repo sorted by updated date and store in repos

useEffect(() => {
fetch("https://api.github.com/users/benngagne/repos?sort=updated")
.then(res => res.json())
.then(result => {
        setRepos(result);
        setIsLoaded(true);
    })
.catch((error) => {
        setIsLoaded(true);
        setError(error);
    })
}, [])

 return (
    <div>
      {
        repos.map((repo, idx) => {
          const {full_name} = repo;
          return <div>{full_name}</div>
         })
      }
    </div>
  )
}

export default App
0
Andre Moraes 15 janv. 2021 à 00:54
65728842