Javascript 链式反应设置状态回调
我需要按顺序加载三个不同的json文件,并进行提取(原因是我正在使用nextjs导出,我需要动态读取这些文件,因此我会在需要时提取它们,即使在导出后,它们的内容也会更改) 第一个文件包含用于为第二个文件创建url的数据,依此类推,因此每次提取都需要实际更新状态才能提取 ATM由于第二个和第三个文件分别依赖于第一个和第二个文件,所以我使用的解决方案是获取第一个文件并使用setState设置一些状态,然后在setState回调中获取第二个文件并设置一些其他状态,依此类推:Javascript 链式反应设置状态回调,javascript,reactjs,callback,setstate,chain,Javascript,Reactjs,Callback,Setstate,Chain,我需要按顺序加载三个不同的json文件,并进行提取(原因是我正在使用nextjs导出,我需要动态读取这些文件,因此我会在需要时提取它们,即使在导出后,它们的内容也会更改) 第一个文件包含用于为第二个文件创建url的数据,依此类推,因此每次提取都需要实际更新状态才能提取 ATM由于第二个和第三个文件分别依赖于第一个和第二个文件,所以我使用的解决方案是获取第一个文件并使用setState设置一些状态,然后在setState回调中获取第二个文件并设置一些其他状态,依此类推: fetch(baseUrl
fetch(baseUrl).then(
response => response.json()
).then(
res => {
this.setState({
...
}, () => {
fetch(anotherUrl+dataFromUpdatedState).then(
response => response.json()
).then(
res => {
this.setState({
...
}, () => {
fetch(anotherUrl+dataFromUpdatedState).then(
response => response.json()
).then(
res => {
this.setState({
})
}
)
})
}
).catch(
error => {
//error handling
}
)
})
}
).catch(
error => {
this.setState({ //an error occured, fallback to default
market: defaultMarket,
language: defaultLanguage,
questions: defaultQuestions
})
//this.setLanguage();
}
)
现在:我知道setState必须小心使用,因为它是异步的,但据我所知,回调函数是在状态更新后调用的,因此从这个角度来看,状态应该正确更新。这种解决方案是反模式的、不好的做法还是出于某种原因应该避免
代码实际上是可以工作的,但我不确定这是否是实现它的方法。您不需要使用
setState
回调并从状态读取它,因为您可以直接从res
对象读取数据。这样你就可以做出一个扁平的承诺链
示例
fetch(baseUrl)
.then(response => response.json())
.then(res => {
this.setState({
// ...
});
return fetch(anotherUrl + dataFromRes);
})
.then(response => response.json())
.then(res => {
this.setState({
// ...
});
return fetch(anotherUrl + dataFromRes);
})
.then(response => response.json())
.then(res => {
this.setState({
// ...
});
})
.catch(error => {
this.setState({
market: defaultMarket,
language: defaultLanguage,
questions: defaultQuestions
});
});