Javascript 获取数据之前的渲染组件已完成

我试图通过创建一个函数来获取数据。在该函数中，我尝试设置状态，并从

componentDidMount

方法调用它，但我遇到了一些问题：

我不确定使用

while

是否是一种好的做法，因为我正在循环和更改端点，以便每次都能获得新数据

我试图从提取函数返回数据，并在

componentDidMount

中使用

setState

，但我怀疑出现了问题，因为

componentDidMount

在提取完成之前正在运行

我曾尝试使用promise对数据使用

res.json（）

，但我得到一个错误，即

res.json

不是函数

状态={
标题：[]，
图像：[]，
评级：[]，
};
getData=（）=>{
设i=1；
while（i console.log（响应））
.then（response=>this.setState({
标题：response.data.data.name[i]，
}))
.catch（错误=>console.log（错误））；
i++；
}
};
componentDidMount（）{
这是getData（）；
console.log（this.state.title）；
}

设置状态的方式将导致api中的最后一个数据保存在状态中，并且只呈现最后一个调用

像这样做

getData =  () => {
let i = 1;
while (i <= 9) {
   axios.get(`http://api.tvmaze.com/shows/${i}`)
  .then(response =>{
let prevState=this.state.title
prevState.push(response.data.data.name[i])
   this.setState({
    title:prevState,
  })})
  .catch(error => console.log(error));
  i++;
}

getData=（）=>{
设i=1；
而{
让prevState=this.state.title
prevState.push（response.data.data.name[i]）
这是我的国家({
标题：prevState，
})})
.catch（错误=>console.log（错误））；
i++；
}

---

})

设置状态的方式将导致api中的最后一个数据保存在状态中，并且只呈现最后一个调用

像这样做

getData =  () => {
let i = 1;
while (i <= 9) {
   axios.get(`http://api.tvmaze.com/shows/${i}`)
  .then(response =>{
let prevState=this.state.title
prevState.push(response.data.data.name[i])
   this.setState({
    title:prevState,
  })})
  .catch(error => console.log(error));
  i++;
}

getData=（）=>{
设i=1；
而{
让prevState=this.state.title
prevState.push（response.data.data.name[i]）
这是我的国家({
标题：prevState，
})})
.catch（错误=>console.log（错误））；
i++；
}

---

})

如果您的目标是在获取完信息后呈现

JSX

，那么我建议您在

状态下创建一个附加项
isLoading
，您可以将其设置为
true
或
false
，并有条件地呈现
JSX

根据您在下面提供的示例，如下所示：

类显示扩展的React.Component{
状态={
标题：[]，
图像：[]，
评级：[]，
孤岛加载：正确
}
componentDidMount（）{
这个文件名为getData（）
}
getData=（）=>{
//我已经为每个请求创建了一个URL
const requestUrls=Array.from（{length:9}）
.map（（x，idx）=>`http://api.tvmaze.com/shows/${idx+1}`）；
常量HandlerResponse=（数据）=>{
//'data'是您请求的所有节目的数组
//从有效负载中提取有关每个节目的信息
const shows=data.map（show=>show.data）
//handle显示您需要的数据
//别忘了将“isLoading”状态设置为“false”`
这是我的国家({
孤岛加载：false，
标题：shows.map（show=>show.name），
图：shows.map（show=>show.url），
评级：shows.map（show=>show.rating.average），
})
}
常量句柄错误=（错误）=>{
//适当地处理错误
//别忘了将“isLoading”设置为“false”`
这是我的国家({
孤岛加载：false
})
}
//使用'Promise.all（）`触发所有API请求
//并在所有请求完成时解决
我保证(
requestUrls.map（url=>axios.get（url））
)
.然后（HandlerResponse）
.catch（把手错误）
}
render（）{
const{isLoading，title，image，rating}=this.state
//除非已提取数据，否则禁止显示“JSX”
//理想情况下，显示加载微调器或将
//告诉用户事情正在发生；
//返回'null'根本不会呈现任何内容
如果（孤岛加载）{
返回空
}
返回(
...
)
}
}

这样，使用
Promise.all
，您可以更轻松地对所有这些呼叫进行推理

除此之外，使用
componentDidMount
从API获取数据是正确的做法，但我会在
循环时避开
，使用
Promise.all
处理所有请求，并使用
map
创建承诺（请求）数组这可以传递给Promise.all
并一次处理所有

工作示例：



如果您的目标是在获取完信息后呈现
JSX
，那么我建议您在
状态下创建一个附加项，即
isLoading
，您可以将其设置为
true
或
false
，并有条件地呈现
JSX

根据您在下面提供的示例，如下所示：

类显示扩展的React.Component{
状态={
标题：[]，
图像：[]，
评级：[]，
孤岛加载：正确
}
componentDidMount（）{
这个文件名为getData（）
}
getData=（）=>{
//我已经为每个请求创建了一个URL
const requestUrls=Array.from（{length:9}）
.map（（x，idx）=>`http://api.tvmaze.com/shows/${idx+1}`）；
常量HandlerResponse=（数据）=>{
//'data'是您请求的所有节目的数组
//从有效负载中提取有关每个节目的信息
const shows=data.map（show=>show.data）
//handle显示您需要的数据
//别忘了将“isLoading”状态设置为“false”`
这是我的国家({
孤岛加载：false，
标题：shows.map（show=>show.name），
图：shows.map（show=>show.url），
评级：shows.map（show=>show.rating.average），
})
}
常量句柄错误=（错误）=>{
//适当地处理错误
//别忘了将“isLoading”设置为“false”`
这是我的国家({
伊斯洛丁