Question

我在下面的文件夹结构中有gatsby react

使用gatsby时如何调用rest full API？我经历过this，但不知道如何在不同组件上一次调用多个api。

Answer 1

这实际上取决于您要实现的目标，这是一个非常广泛的问题。首先，以上文件结构图对解决方案没有任何影响。其次，不要为盖茨比而烦恼。 Gatsby是用于构建React应用程序的工具，因此实际上您只是在构建和填充React组件，因此，如果遇到问题，请使用React搜索帮助。

这实际上取决于您是否试图在页面中填充一堆组件以供用户使用，或者是否需要为包含大量共享数据的组件的页面“控制状态”。您可以从组件本身调用API，也可以从“父”组件调用API，然后将数据传递到目标（称为“子”）组件。

如果我有一个需要数据的组件，但是该数据未用于应用程序状态，那么我将使用该组件本身的componentDidMount（）方法，这在发布的链接中得到了明确说明。例如，您希望下拉列表/选择中加载了一组默认数据。

componentDidMount(){
    fetch(ApiURL)
        .then(result=>result.json())
        .then(result=>this.setState({countries}, this.buildSelectOptions(countries)))
}

这是当组件已安装在页面上时，componentDidMount方法将触发。然后，这将调用fetch命令并将原始结果粘贴到country国家属性中。然后，它将调用“ this.buildSeletOptions（countries）”方法为选择组件构建“ options”数组。

例如

buildSelectOptions(countries){

    var optionsArray[];
    var newCountry={key: 1, value:'All', text:'All'};
    optionsArray.push(newCountry);

    for(var i = 0; i < countries.length; i++) {
        let nextCountry = {key: i+2, value:countries[i].name, text:countries[i].name};
        optionsArray.push(nextCountry);
    }

    this.setState({options: optionsArray});

}

要一次调用多个API，我将转到所有受影响的子组件都位于其下的第一个父对象。例如。我的页面包含多个组件，并且都需要填充。

class SomePage extends React.Component {

    constructor(props) {
        super(props);

        this.state = {compOneData:'', compTwoData:''};

    }

    componentDidMount(){
        this.loadData();
    }

    loadData(){

        fetch(someApiURL)
            .then(result=>result.json())
            .then(result=>this.setState({compOneData: result});

        fetch(someotherApiURL)
            .then(result=>result.json())
            .then(result=>this.setState({compTwoData: result});     
    }


    render(){

        return (

            <div>
            <ComponentOne data={this.state.compOneData} />
            <ComponentTwo data={this.state.compTwoData} />
            </div>
        );

    }
}

export default SomePage;

这里发生的是，当加载SomePage时，将调用componentDidMount方法。现在，这里有两个访存调用，它们将被并行调用。然后，React setState将处理API返回的数据。一旦setState完成，React便会记录状态变化并将数据推送到两个子组件。这是一个简单的示例，没有说明如何处理第二个API调用依赖于第一个API的数据的情况，但是应该给您足够的帮助。

使用Gatsby进行宁静的api调用

1 个答案: