Problèmes de rendu des données récupérées avec useEffect dans un hook personnalisé

Cette ligne ne renvoie pas les jobs et locations:

// A reusable JSON fetch wrapper that handles HTTP errors
function fetchJSON(...args) {
    return fetch('/api/jobs/list-jobs', { headers: headers })
      .then(r => {
          if (!r.ok) {
              throw new Error("HTTP error " + r.status)
          }
          return r.json()
      });
}

function useJobs () {
  const [jobs, setJobs] = React.useState([])
  const [locations, setLocations] = React.useState([])
  React.useEffect(() => {
    fetchJSON('/api/jobs/list-jobs', { headers: headers })
      .then(setJobs)
  }, [])
  React.useEffect(() => {
    // *** Don't use `map` as a simple iteration construct
    for (const job of jobs) {
      fetchJSON(`/api/jobs/view-location/${job.location}/`, { headers: headers })
        .then(setLocations) // *** Need to handle #6 here
    }
  }, [jobs]) // *** No additional array here

  return [jobs, locations]
}

export default function Jobs () {
  const classes = useStyles()
  const [jobs, locations] = useJobs() // *** Use jobs and locations here
  return (
    <>
   {jobs.map(job => (
          <>
            <div className={classes.root} key={job.id}>
            ......
            <Row>
                  <Col style={{ color: 'black' }}>Title:{job.title} </Col>
                  <Col>Company Name:{job.company_name} </Col>
                  <Col style={{ color: 'black' }}>Internal Code:{job.internal_code} </Col>
             </Row>

            {locations.map(location => (
             <Col key={location.id} style={{ color: 'black' }}>Location:{location.country}</Col>))
            }

Au lieu de cela, elle évalue les jobs , jette ce résultat, évalue les emplacements et renvoie cette valeur.

Si vous vouliez renvoyer un tableau contenant jobs et emplacements code>, vous pouvez soit retourner un tableau les contenant sous forme d'entrées:

React.useEffect(() => {
  jobs.map(job => (
    axios.get(`/api/jobs/view-location/${job.location}/`, { headers: headers })
      .then(res => res.json())
      .then(setLocations)
  ))
}, [jobs], [])
// −−−−−−^^^^−−−−−−−−−−−−−−−− remove

et l'utiliser comme ceci, plutôt que de faire deux appels à useJobs :

const {jobs, locations} = useJobs();

ou renvoyez un objet les contenant comme propriétés:

return {jobs, locations};

et utilisez-le comme ceci, encore une fois plutôt que d'en faire deux appels à useJobs:

const [jobs, locations] = useJobs();

Il y a quelques autres choses qui sautent:

1. Comme je l'ai mentionné dans un commentaire, votre code est la proie du footgun dans l'API fetch : fetch ne rejette que sur réseau em> erreur, pas erreur HTTP; vous devez vérifier cela séparément (généralement en vérifiant response.ok ). Détails sur mon petit blog anémique .

2. useEffect accepte uniquement jusqu'à deux arguments, pas trois. Vous en utilisez trois ici:

   return [jobs, locations];
   

3. Il semble étrange d'utiliser fetch à un endroit mais axios à un autre. Je suggère de normaliser l'un ou l'autre. À moins que vous n'ayez une bonne raison d'utiliser axios , j'utiliserais probablement simplement un wrapper sur fetch qui vérifie les erreurs HTTP et les rejets.

4. Je n'utilise pas axios , mais Shubham Khatri signale des problèmes avec son utilisation dans votre code.

5. Vous utilisez map comme simple itérateur pour un tableau. Ce n'est jamais approprié, map sert à créer un nouveau tableau à partir des résultats du rappel map . Si vous n'utilisez pas la valeur de retour de map , utilisez plutôt forEach (ou for-of ).

   li >

6. Vous effectuez un appel ajax par tâche dans une boucle, mais vous stockez ensuite les résultats dans des emplacements . Cela signifie que les résultats de chaque appel de la boucle écrasent tous les résultats précédents. Vous vouliez probablement faire quelque chose avec tous les résultats.

En prenant tout cela ensemble:

return (jobs, locations)

... mais cela ne gère pas le # 6.

• Une réponse à une requête axios n'a pas besoin d'être exécutée via res.json () . Il est requis pour une demande de récupération. La réponse axios a également plusieurs informations et les données sont fournies avec resp.data

• De plus, la dépendance useEffect est juste un argument au lieu que vous en transmettez deux

function useJobs () {

  const [jobs, setJobs] = React.useState([])
  const [locations, setLocations] = React.useState({})
  React.useEffect(() => {
    axios('/api/jobs/list-jobs', { headers: headers })
      .then(res => setJobs(res.data))
  }, [])
  React.useEffect(() => {
    for (const job of jobs) {
      axios(`/api/jobs/view-location/${job.location}/`, { headers: headers })
        .then((data) => {
           setLocations(prev => ({...prev, [job.id]: res.data}))
        })
    }
  }, [jobs])

  return [jobs, locations]
}


export default function Jobs () {
  const classes = useStyles()
  const { jobs,locations} = useJobs();
  return (
    <>
      {jobs.map(job => (

          <>
            <div className={classes.root} key={job.id}>
......

        <Row>
              <Col style={{ color: 'black' }}>Title:{job.title} </Col>
              <Col>Company Name:{job.company_name} </Col>
              <Col style={{ color: 'black' }}>Internal Code:{job.internal_code} </Col>

         </Row>


        {locations[job.id].map(location => (
            <Col key={location.id} style={{ color: 'black' 
         }}>Location:{location.country}</Col>))
         }

• Une autre chose à noter ici est que le hook useJobs renvoie à la fois les emplacements et les tâches, vous n'avez donc pas besoin de l'exécuter deux fois et non pas que vous ayez besoin de renvoyer le résultat de useJobs en tant qu'objet, c'est-à-dire avoir

    return ( jobs, locations )

au lieu de

    return { jobs, locations }

• Lors de la mise à jour des emplacements, vous remplacez les emplacements, veuillez utiliser un objet pour les emplacements

Code complet:

      React.useEffect(() => {
        axios('/api/jobs/list-jobs', { headers: headers })
          .then(res => setJobs(res.data))
      }, [])
      React.useEffect(() => {
        jobs.map(job => (
          axios.get(`/api/jobs/view-location/${job.location}/`, { headers: headers })
            .then(res => setLocations(prev => ({...prev, [job.id]: res.data})))

        ))
      }, [jobs])

En plus des autres réponses, vous avez également un problème pour appeler setLocations .
Parce que vous l'appelez de l'intérieur de la fonction de carte, vous l'appelez une fois pour chaque tâche.

Promise.all(
  jobs.map(job => (
    axios.get(`/api/jobs/view-location/${job.location}/`, { headers: headers })
        .then(response => response.data)
  ))
)
.then(allLocations => setLocations(allLocations))

Vous dites effectivement:

setLocations('London');
setLocations('Paris');

Il est clair que si vous appelez cela deux fois, vous perdez Londres et ne persistez que l'emplacement final.

Au lieu de cela, vous vouliez stocker tous les emplacements dans un tableau, alors attendez que toutes les promesses se terminent, puis stockez-les tous ensemble.

jobs.map(job => (
  axios.get(`/api/jobs/view-location/${job.location}/`, { headers: headers })
    .then(setLocations)
))