Chargement d'une page avec des données issues d'un fetch

Version imprimable

Bonjour,
J'essaye de charger des données avec un fetch et de les afficher dans une page :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 function ChartInfos() { const [chart, setChart] = useState(null); const [map, setMap] = useState(null); useEffect(() => { fetch('mon_url?format=json') .then(response => response.json()) .then(data => { setChart(data.carte) }); const osmLayer = new TileLayer({ preload: Infinity, source: new OSM(), }) const map = new Map({ target: "map", layers: [osmLayer], view: new View({ center: [0, 0], zoom: 0, }), }); setMap(map) return () => map.setTarget(null) }, []); return ( <div className="App"> <AppHeader /> <Container fluid> <Row> <Col>Carte n°{chart.numero} - {chart.titre}</Col> </Row> <Row> <Col> <div>{d.numero}</div> </Col> <Col> <div style={{height:'100vh',width:'100%'}} id="map" className="map-container" /> </Col> </Row> </Container> </div> ); } export default ChartInfos;
Mais au chargement de la page, j'ai un message d'erreur :

Citation:

chart is null
ChartInfos@http://localhost:3000/static/js/bundle.js:838:37
renderWithHooks@http://localhost:300...c/js/bundle.js:58591:31
mountIndeterminateComponent@http://l...c/js/bundle.js:62562:17
beginWork@http://localhost:3000/static/js/bundle.js:63865:20
callCallback@http://localhost:3000/static/js/bundle.js:48847:18
invokeGuardedCallbackDev@http://loca...c/js/bundle.js:48891:20
invokeGuardedCallback@http://localho...c/js/bundle.js:48948:35
beginWork$1@http://localhost:3000/static/js/bundle.js:68846:32
performUnitOfWork@http://localhost:3...c/js/bundle.js:68094:16
workLoopSync@http://localhost:3000/static/js/bundle.js:68017:26
renderRootSync@http://localhost:3000...c/js/bundle.js:67990:11
performConcurrentWorkOnRoot@http://l...c/js/bundle.js:67385:78
workLoop@http://localhost:3000/static/js/bundle.js:90876:46
flushWork@http://localhost:3000/static/js/bundle.js:90854:18
performWorkUntilDeadline@http://loca...c/js/bundle.js:91091:25

Est ce que c'est un problème de requête asynchrone? comment remédier?

Merci,
Nico

21/10/2024, 10h42
DiverSIG

Il semble qu'il ne passe jamais dans le useEffect, pourquoi?
un problème de syntaxe?

Nico

Sur un autre cas, en me basant sur l'exemple ici, j'écris ce code :

(WMSCapabilities est le composant disponible ici)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 function myComponent({url}) { const [capabilities, setCapabilities] = useState(null); useEffect(() => { fetchData(); }, []); const fetchData = async () => { try { const response = await fetch(url); const result = await response.text(); console.log(result); const wms = new WMSCapabilities().parse(result); console.log(wms) console.log(wms.version) setCapabilities(wms) } catch (error) { console.error('Error fetching data:', error); } }; return ( <div> {capabilities.version} </div> ); }
Tous les console.log dans la fonction fetchData me renvoient bien les valeurs qu'il faut, mais j'ai une erreur qui vient du return :

Citation:

capabilities is null

Si dans la fonction fetchData, au lieu de faire setCapabilities(wms) je fait setCapabilities('1234'), je n'ai plus d'erreur, et j'ai bien '1234' qui s'affiche..

Pourquoi ?

Merci,
Nico

un code sui marche :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function myComponent({url}) {
 
  const [capabilities, setCapabilities] = useState(null);
  const [myDataIsLoading, setLoading] = useState(true)
 
  useEffect(() => {
    fetchData()
    .then(res => {
      setCapabilities(res);
      setLoading(false);
    });
  }, []);
 
  const fetchData = async () => {
    try {
      const response = await fetch(url);
      const result = await response.text();
      const wms = new WMSCapabilities().parse(result);
      return wms
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };
 
  if(myDataIsLoading){
    return <h1>Loading...</h1>
  } else if(!myDataIsLoading){
    return(
      <Container fluid>
      <Row><Form.Label>{url}</Form.Label></Row>
      <Row><Form.Label><span>Version</span> : <span>{capabilities.version}</span></Form.Label></Row>
      </Container>
    )
  }
}

Nico