Chargement des données de la fonction à l'état

Question

J'ai une fonction qui charge toutes les données de l'API. Je voudrais utiliser cette fonction pour passer ces données au tableau. Mais je n'arrive pas à trouver comment le faire.

J'ai déjà essayé de mettre cette fonction à l'intérieur de l'état de mon tableau, car je ne sais pas comment utiliser cette fonction.

function getRoles {
    const url = 'URLTOENDPOINT'
    fetchUtils.fetchJson(url, {
        method: "GET",
    })
    .then(response => {
        Object.keys(response.json.value).forEach(function (key) {
            var object = response.json.value[key];
            names.push(object.Name);
        })
    });
    return names;
}

Je veux simplement charger des données à partir de getRoles à ce tableau dans l'état :

class MultipleSelect extends React.Component {
    state = {
      name: [
        'Oliver Hansen',
        'Van Henry',
        'April Tucker'
      ]
    };

...

Le résultat attendu devrait être MultipleSelect avec les données par défaut chargées depuis l'API.

Avez-vous des idées sur la manière d'utiliser cette fonction ou sur les améliorations à apporter ?

Answer 1

componentDidMount(){
 this.setState({name:getRoles()})
 }

vous pouvez essayer de cette façon également le retour de fonction directement le mettre à la variable d'état

class MultipleSelect extends React.Component {
   state = {
     name: [
      'Oliver Hansen',
      'Van Henry',
      'April Tucker'
  ]
};

 getRoles() {
  const url = 'URLTOENDPOINT'
  var names
  fetchUtils.fetchJson(url, {
  method: "GET",
  })
 .then(response => response.json())
 .then((res) => {
   console.log(res)
  names = res.value.map((data)=>(data.Name))
 })
 return names;
}

componentDidMount(){
  this.setState({name:this.getRoles()})
 }
}

Answer 2

Ajout à mon commentaire :

 componentDidMount() {
    fetch(
      `https://xxx`,
    )
      .then(res => res.json())
      .then(val=> {
        this.setState({ ... });
      });
  }