使用gatsby进行Restful api调用
回答 1
Stack Overflow用户
发布于 2019-03-14 22:24:02
这实际上取决于你试图实现的目标，这是一个非常宽泛的问题。首先，上面的文件结构图像对解决方案没有任何影响。其次，不要为Gatsby而烦恼。Gatsby是一个用于构建React应用程序的工具，因此您实际上只是在构建和填充React组件，所以如果您遇到困难，请使用React搜索帮助。
这真的取决于你是否试图在一个页面中填充一堆组件供用户使用，或者你是否需要为一个包含大量共享数据的组件的页面“控制状态”。您可以从组件本身调用API，也可以从“父”组件调用API并将数据传递到目标(称为“子”)组件。
如果我有一个需要数据的组件，但数据不是用于应用程序状态，那么我将使用组件本身的componentDidMount()方法，这在您发布的链接中有明确的演示。例如，您希望使用一组默认数据加载dropdown/select。
componentDidMount(){
fetch(ApiURL)
.then(result=>result.json())
.then(result=>this.setState({countries}, this.buildSelectOptions(countries)))
}这样做的目的是，当组件装载到页面上时，将激发componentDidMount方法。然后调用fetch命令并将原始结果粘贴到countries状态属性中。然后，它调用'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调用依赖于第一个API调用中的数据的情况，但应该足以让您继续下去。
https://stackoverflow.com/questions/55163052
复制相似问题
腾讯云开发者
