将从 api 接收到的数据格式化为数组 React Axios

Posted 2023-02-22

【中文标题】将从 api 接收到的数据格式化为数组 React Axios

【英文标题】：Formatting the received data from an api into an array React Axios

【发布时间】：2020-08-17 16:48:49

【问题描述】：

我是 react 新手，我使用 react-select 设计了一个下拉菜单

const Locations = [
   label: "Albania", value: 355 ,
   label: "Argentina", value: 54 ,
   label: "Austria", value: 43 ,
   label: "Cocos Islands", value: 61 ,
   label: "Kuwait", value: 965 ,
   label: "Sweden", value: 46 ,
   label: "Venezuela", value: 58 
];

<Select placeholder='Select from pre-created Tags 'onChange=handleDropDown('Tags') defaultValue=values.Tags required options=Locations/>

我已经使用 axios 从 api 中收到了一些数据：

 state = 
    locations:[],
    departments: [],
    tagsList:[],
  

axios.get('/api/jobs/list-tags',headers:headers).then(respo =>
      console.log(respo.data)
      this.setState(
        tagsList:respo.data
      )
      console.log(this.state.tagsList)

从 api 收到的数据如下所示：

Object  id: 1, name: "MongoDB" 
Object  id: 2, name: "javascript" 

我想用从 api 接收到的相同格式的信息替换 Locations 数组中的硬编码数据。 （而不是 label: "Albania", value: 355 , id: 2, name: "JavaScript" ）。我怎样才能做到这一点？

【参考方案1】：

您可以map回复数据：

      this.setState(
        locations: respo.data.map(t=>(label: t.name, value: t.id))
      )

【讨论】：

是的，但我会在这里放什么？选项=位置

我的意思是位置不是标签列表，我的错。

是的，但由于这是在 setState 中，如果我像 options=locations 这样写它会给我一个错误。 （'locations' 没有定义。）应该是 this.state.locations 吗？

是的，应该是this.state.locations

@VahidAlimohamadi 对解决方案的介绍听起来屈尊俯就，我将其替换为文档链接...