Question

我有这段代码调用了一个Web服务，我有一些问题。

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

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

第二个是，我如何在材料ui下拉列表中填充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>
   );
  }
}

上面的代码工作正常。

谢谢和问候。

Answer 1

关于使用数据填充下拉列表，这应该可以正常工作.Haven不会测试代码。所有与material-ui/Dropdown相关的内容都可以check here。

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

调用第二个Web服务的最佳做法是什么？

回答：在componentDidMount中调用很好。这也取决于其他事情。如果两个WS调用都是独立的，那么你可以使用类似的承诺来调用它们：

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

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

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

这取决于你想要对第二个WS的数据做什么。如果你想要添加到下拉列表，那么你可以简单地与data数组连接。如果想要用于其他目的而不是你应该保留数据分开。

第二个是，我如何在一个中填充WS的结果材料ui下拉列表，我想用数据来填充它们与WS。

开头粘贴的代码应该有效。您可以简单地映射数据创建选项以显示在列表中

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

1 个答案: