用 gatsby 调用 Restful api

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 命令并将原始结果粘贴到国家状态属性中。然后它调用 '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 方法被调用。现在这里有两个 fetch 调用，它们将被并行调用。然后 React setState 将处理 API 返回的数据。一旦 setState 完成，React 会记录状态的变化并将数据推送到两个子组件。这是一个简单的例子，并没有解释如何处理第二个 API 调用依赖于第一个数据的情况，但应该足以让您继续。