Discussion :

[DiverSIG]

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

[DiverSIG]

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

Nico

[DiverSIG]

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

(WMSCapabilities est le composant disponible ici)

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
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 :

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

[DiverSIG]

un code sui marche :

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
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