Discussion :

[kkelkun]

Bonjour tout le monde,

Je suis en train de créer une appli toute simple qui recupere des infos depuis des documents xml.

J'arrive à fetch la data dans un array sans problème dans mon state. Mais dès que j'essaie de mapper dessus ou même d'utiliser length ca me renvoie un array vide

Voici mon code:

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
54
 
import React, { Component } from 'react';
import { parseString } from 'xml2js';
import data from './data';
 
class App extends Component {
  state = {
    parks: []
  };
 
  componentWillMount() {
    let { parks } = this.state;
    for (let key of data) {
      this.fetchData(parks, key.name, key.url);
    }
    this.setState({ parks });
  }
 
  fetchData = (parks, name, url) => {
    let free = '';
    let park = {};
    fetch(url)
      .then(response => response.text())
      .then(xml => {
        parseString(xml, function(err, result) {
          if (result) {
            free = result.park.Free[0];
            while (free[0] === '0') {
              free = free.slice(1);
            }
          } else {
            free = 'no info avaible';
          }
        });
        park = {
          name: name,
          free: free
        };
        parks.push(park);
      });
  };
 
  render() {
    const { parks } = this.state;
    const parkList = parks.map(({ name, free }) => <div>{name}</div>);
 
    console.log(parks);    
    console.log(parksList);
 
    return <div>{parksList}</div>;
  }
}
 
export default App;

La data ressemble à ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
const data = [
  {
    name: 'name1',
    url:
      'https://exemple.fr/sites/default/files/ressources/name1.xml'
  },
  {
    name: 'name2',
    url:
      'https://exemple.fr/sites/default/files/ressources/name2.xml'
  },
];

this.state.parks renvoies bien mes données mais parks.lenght ou un mapping ne renvoie rien..
J'ai retourné le problème dans tous les sens mais je vois pas.

Merci à ceux qui prendront le temps de me répondre

[gwyohm]

Salut,

Je pense que ton problème, c'est que quand tu entres dans componentWillMount et que tu fait ton appel à fetchData, tu es en asynchrone.
Du coup le fetch est lancé, immédiatement après la mise à jour du state est faite dans (dans componentWillMount, la dernière ligne).

Tu devrais essayer de faire ton setState quand tout l'asynchrone est fini.
Attention je dis bien tout car parseString qui te permets de parser le XML prend un callback en paramètre, ce qui signifie que mettre à jour le state dans un dernier then ne fonctionnera pas non plus.

Il est assez simple de wrapper parseData pour qu'il réagisse comme une promise, et du coup l'utiliser dans un then :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
function promisedParse(xml) {
  return new Promise((resolve, reject)=>{
    parseString(xml, function(err, result) {
          if (err) {
            reject(err)
          } else {
            resolve(result);
          }
        });
  })
}

Ca te permet de faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
fetch(url)
      .then(response => response.text())
      .then(strXml => promisedParse(strXml))
      .then((xml) => {
        // ton traitement sur le flux xml qui renvoie un tableau
      })
      .then(parks => this.setState({parks})