Загрузить данные из функции в состояние - PullRequest
Новая
       6

Загрузить данные из функции в состояние

3 голосов
/ 01 апреля 2019

У меня есть функция, которая загружает все данные из API. Я хотел бы использовать эту функцию для передачи этих данных в массив. Но я не могу понять, как это сделать.

Я уже пытался поместить эту функцию в состояние моего массива, потому что я не знаю, как использовать эту функцию 

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

Просто я хочу загрузить данные из функции getRoles в этот массив внутри состояния: 

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

...

Ожидаемый результат должен быть MultipleSelect с данными по умолчанию, загруженными из API.

Есть идеи, как использовать эту функцию или что следует улучшить?

Ответы [ 2 ]

1 голос
/ 01 апреля 2019 
componentDidMount(){
 this.setState({name:getRoles()})
 }

вы можете попробовать этот способ, также функция return напрямую устанавливает его в переменную состояния 

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()})
 }
}
0 голосов
/ 01 апреля 2019

Дополнение к моему комментарию: 

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