reactjs - 将数据从函数加载到状态

Question

我有从 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 加载的。

有什么想法如何使用该功能或​​应该改进什么吗？

Answer 1

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

你也可以尝试这种方式，函数返回直接将其设置为状态变量

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()})
 }
}