Javascript 使用react js调用两个以上的web服务，并将它们填充到material ui下拉列表中

我有一段调用web服务的代码，我有一些问题

第一个问题是，调用第二个WS的最佳实践是什么，现在我只调用一个WS并在列表中显示数据，但是如果我有第二个WS，我应该在componentDidMout（）方法中调用它吗

现在我有了一个名为data的数组，但是例如，我应该为第二个WS调用使用第二个数组吗

第二个问题是，如何在MaterialUI下拉列表中填充WS的结果，我想用WS附带的数据填充它们

我是新来的反应，所以一些帮助会很好

import React, { Component } from 'react';
import DropDownMenu from 'material-ui/DropDownMenu';

export default class WebserviceTest extends Component {

 constructor() {
    super();
    this.state = {
    data: []
    };
 }

componentDidMount() {

const url = 'https://randomuser.me/api/?results=4';

 fetch(url).
 then((Response) => Response.json()).
   then((findResponse) => {
     console.log(findResponse);
     this.setState({
       data: findResponse.results
     });
 });

}
 render() {
 const listDesc = this.state.data.map((dt, i) =>
 <div>
   <div>
     <li key={i}>{dt.name.first}</li>
   </div>
 </div>
 );

 return (
    <div>
      <ul>{listDesc}</ul>
    </div>
   );
  }
}

import React，{Component}来自'React'；
从“物料界面/下拉菜单”导入下拉菜单；
导出默认类WebserviceTest扩展组件{
构造函数（）{
超级（）；
此.state={
数据：[]
};
}
componentDidMount（）{
常量url=https://randomuser.me/api/?results=4';
获取（url）。
然后（（Response）=>Response.json（）。
然后（（findResponse）=>{
console.log（findResponse）；
这是我的国家({
数据：findResponse.results
});
});
}
render（）{
const listDesc=this.state.data.map（（dt，i）=>
{dt.name.first}
);
返回(
{listDesc}
);
}
}

上面的代码工作正常

---

感谢和问候。

关于用数据填充下拉列表，这应该可以完成工作。尚未测试代码。与

材质ui/下拉列表相关的所有内容都可以

提示：如果您将上述代码段粘贴到控制台中，您将获得输出。您可以检查输出。它返回一个响应数组

现在我有了一个名为data的数组，但是例如，我应该使用
第二个WS调用的第二个数组

这取决于你想对第二个WS的数据做什么。如果你想添加到下拉列表中，那么你可以简单地使用
数据
数组进行压缩。如果你想用于其他目的，你应该将数据分开

第二个问题是，我如何在
“材质ui”下拉列表，我想用即将到来的数据填充它们
与WS

粘贴在开头的代码应该可以工作。您可以简单地映射数据创建选项以显示在列表中
谢谢您的时间！！
import React, { Component } from "react";
import DropDownMenu from "material-ui/DropDownMenu";
import MenuItem from "material-ui/MenuItem";

export default class WebserviceTest extends Component {
    constructor() {
        super();
        this.state = {
            data: []
        };
        this.renderOptions = this.renderOptions.bind(this);
    }

    componentDidMount() {
        const url = "https://randomuser.me/api/?results=4";

        fetch(url)
            .then(Response => Response.json())
            .then(findResponse => {
                console.log(findResponse);
                this.setState({
                    data: findResponse.results
                });
            });
    }
    //will set wahtever item the user selects in the dropdown
    handleChange = (event, index, value) => this.setState({ value });
    //we are creating the options to be displayed
    renderOptions() {
        return this.state.data.map((dt, i) => {
            return (
                <div>
                    <MenuItem key={i} value={dt.name.first} primaryText={dt.name.first} />
                </div>
            );
        });
    }

    render() {
        return (
            <div>
                <DropDownMenu value={this.state.value} onChange={this.handleChange}>
                    {this.renderOptions()}
                </DropDownMenu>
            </div>
        );
    }
}

Promise
    .all([
        fetch('https://randomuser.me/api/?results=4').then((res) => res.json()),
        fetch('https://randomuser.me/api/?results=4').then((res) => res.json()), 
    ])
    .then((response) => console.log(response)
    )