Reactjs 如何通过react代码调用包含字符串数组的api

我需要调用一个由字符串数组组成的api。然后我需要在下拉菜单中发布api的响应。下面是我需要调用的API-

api数据示例-[“Leanne Graham”、“Ervin Howell”、“Patricia”]

下面的示例代码具有保存对象信息的API

import React, { Component } from "react";
import "../styles/schema.css";
import Params1 from "../components/Params1";
import axios from 'axios';
import Select from "react-select";
class New extends Component {

  constructor(props) {
    super(props);
    this.handleStoreprocSelection = this.handleStoreprocSelection.bind(this);
    this.state = {
      selectStoreprocOptions : [],
      id: "",
      name: '',
      itemSelected:false
    }
  }

  async getStoreProcOptions(){
    const resSchema = await axios.get('https://jsonplaceholder.typicode.com/users') --backend API call in object format
    const data = resSchema.data
  
    const options = data.map(d => ({
      "value" : d.id,
      "label" : d.name
    }))
    this.setState({selectStoreprocOptions: options})
  }

  handleStoreprocSelection(){
    // alert('You selected me!!')
    this.setState({itemSelected: true});
  }
  componentDidMount() {
    // get all entities - GET
    this.getStoreProcOptions()

  }
  

  render() {

    const itemSelected = this.state.itemSelected;
    let param;
    if (itemSelected) {
      param = <Params1 />;
    }
    
    return (
        <div>
            <div>
            <form id ="store-proc">
            <label>STORED PROCEDURE</label>
            <Select id="store-proc-select" options={this.state.selectStoreprocOptions} onChange={this.handleStoreprocSelection} /> --my dropdown
            </form>
            </div>
            {param}
        </div>
    );
  }
}
export default New;

import React，{Component}来自“React”；
导入“./styles/schema.css”；
从“./components/Params1”导入参数1；
从“axios”导入axios；
从“反应选择”导入选择；
类新扩展组件{
建造师（道具）{
超级（道具）；
this.handleStoreprocSelection=this.handleStoreprocSelection.bind（this）；
此.state={
选择StoreProcOptions:[]，
id:“”，
名称：“”，
所选项目：false
}
}
异步getStoreProcOptions（）{
const resSchema=等待axios.get（'https://jsonplaceholder.typicode.com/users'）--对象格式的后端API调用
const data=resSchema.data
const options=data.map（d=>({
“价值”：d.id，
“标签”：d.name
}))
this.setState（{selectStoreprocOptions:options}）
}
handleStoreprocSelection（）{
//警报（'您选择了我！！'）
this.setState（{itemSelected:true}）；
}
componentDidMount（）{
//获取所有实体-获取
这是getStoreProcOptions（）
}
render（）{
const itemSelected=this.state.itemSelected；
让帕拉姆；
如果（已选择项）{
参数=；
}
返回(
存储过程
--我的下拉列表
{param}
);
}
}
导出新的默认值；

你需要一个状态，比如说一个空数组

您需要使用一些方法调用该API，例如内置的浏览器获取或第三方库axios

然后，您需要使用将从API获得的响应更新您的状态

最后，在组件内部使用您的状态并显示您想要的任何内容

---

如果你需要一些逻辑，这些是你需要遵循的步骤。因为您没有提供任何代码，我想您不知道从哪里开始。如果您共享一些代码，将有可能提供更多帮助。

您是否使用任何库？因为普通HTML表单select将使用小写字母

，而不是

。如果是，请说明

在纯HTML中：解决方案是将数组元素映射到

。因此，

从
状态
中选择StoreProcOptions

，如下所示：

this.setState（{selectStoreprocOptions:options}）

内部

渲染

：

<select>
  {
    this.state.selectStoreprocOptions.map(selectStoreprocOption => (<option ..> .. </option>)
  }
</select>

{
this.state.selectStoreprocOptions.map（selectStoreprocOption=>（..）
}

编辑：对不起，我已经监督了

react select

的使用。从未使用过它，根据API文档，它对我来说很好。您是否检查过您的状态是否确实包含一个包含预期对象的数组

---

或许可以忽略我的帖子，再次抱歉xD

你能和我们分享一下你到目前为止做了什么吗？或者给我们一个你尝试的例子如果你能发布一些简单的代码来帮助我们理解你想要实现的目标，我们可以帮你做得更好。是的，我正在使用导入中提到的从反应中选择。抱歉，我已经监督了这一点。我会更新帖子。唯一的问题是，使用不同的api，包含以下格式的数据，上面的代码对我不起作用-[“$G680301”，“AIM1”，“AIM2”，“B6435CUU”，“B6435DBS”，“B6435DBT”，“B6435DBU”，“BEFT”，“CC390”，“CICSIA”]你能帮忙吗？