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

Answer 2

除了我的评论：

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

将数据从功能加载到状态

2 个答案: