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

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 :
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