Reactjs Promise.all在循环控制台中显示数据，但不向状态传递数据

我对多个API调用的Promise.all函数有问题。我正在进行多个api调用，然后将结果记录到console.log中。在

map

函数中执行

console.log

时，我可以看到结果，但当试图设置状态以便在UI中呈现和显示时，数据不会流向状态。我不知道问题到底出在哪里，也不知道为什么数据没有流向州政府

这是我的密码

    componentDidMount() {
        
        const promises = data.map(id => {
            return new Promise((resolve) => {
              fetch(`https://example.com/api/ITems/${id.ID}`)
                .then(response => {
                  return new Promise(() => {
                    response.json()
                    .then(response => {
                        console.log(response); // this console log is showing me data into console, but the console.log below in promise.all section is not showing any data
                        resolve()
                      })
                      .catch((error) => {
                            console.log(error);
                        })
                  })
                })
            })
          })

        Promise.all(promises).then(results => {
            this.setState({Ids: results.data}); // no data is passing to state
           console.log(results); // this console.log does not work. when remove the console.log in loop, i cannot see anything. data is not flowing here
        })
        .catch((error) => {
            console.log(error);
        })
      }
    

---

谢谢大家。

之所以发生这种情况，是因为您正在解析为未定义，因此您所有的承诺返回值都是未定义的

将其更改为：

resolve（response）

，这样它将使用所需的

response

    const promises = data.map(id => {
        return new Promise((resolve) => {
          fetch(`https://example.com/api/ITems/${id.ID}?realm=xyz`, { headers })
            .then(response => {
              return new Promise(() => {
                return response.json() // <--------------------------- Additionally you need to return this as well
                .then(response => {
                    console.log(response); // this console log is showing me data into console, but the console.log below in promise.all section is not showing any data
                    resolve(response) // <---------------------------- ISSUE is here
                  })
                  .catch((error) => {
                        console.log(error);
                    })
              })
            })
        })
      })

const promises=data.map（id=>{
返回新承诺（（解决）=>{
取回(`https://example.com/api/ITems/${id.id}？realm=xyz`，{headers}）
。然后（响应=>{
返回新承诺（（）=>{
返回response.json（）//{
console.log（response）；//此控制台日志将数据显示到控制台中，但promise.all中下面的console.log部分未显示任何数据
决议（答复）//{
console.log（错误）；
})
})
})
})
})

之所以发生这种情况，是因为您正在解析为未定义，因此您所有的承诺返回值都是

未定义的

将其更改为：

resolve（response）

，这样它将使用所需的

response

    const promises = data.map(id => {
        return new Promise((resolve) => {
          fetch(`https://example.com/api/ITems/${id.ID}?realm=xyz`, { headers })
            .then(response => {
              return new Promise(() => {
                return response.json() // <--------------------------- Additionally you need to return this as well
                .then(response => {
                    console.log(response); // this console log is showing me data into console, but the console.log below in promise.all section is not showing any data
                    resolve(response) // <---------------------------- ISSUE is here
                  })
                  .catch((error) => {
                        console.log(error);
                    })
              })
            })
        })
      })

const promises=data.map（id=>{
返回新承诺（（解决）=>{
取回(`https://example.com/api/ITems/${id.id}？realm=xyz`，{headers}）
。然后（响应=>{
返回新承诺（（）=>{
返回response.json（）//{
console.log（response）；//此控制台日志将数据显示到控制台中，但promise.all中下面的console.log部分未显示任何数据
决议（答复）//{
console.log（错误）；
})
})
})
})
})
 > p>您不是“代码>解析< /代码> ING任何东西。请考虑仅在<代码>承诺中避免“and”代码> catch >代码> < <代码> > 

const promises = data.map(id => 
  fetch(`https://example.com/api/ITems/${id.ID}?realm=xyz`, { headers })
    .then(res => res.json())
    .then(result => result.data)
 );
Promise.all(promises).then(results => {
  this.setState({Ids: results});
})
.catch((error) => {
  console.log(error);
});

值
Promise.all
将始终是一个数组-它没有
.data
属性。听起来每个
fetch
结果都会返回一个带有
data
属性的对象，因此您应该在
映射中执行此操作，而不是在
Promise.all
中执行此操作你不是<代码>解析< /代码> ING。考虑在“<代码>承诺”中避免“和”代码> catch >代码>所有< /代码>：

const promises = data.map(id => 
  fetch(`https://example.com/api/ITems/${id.ID}?realm=xyz`, { headers })
    .then(res => res.json())
    .then(result => result.data)
 );
Promise.all(promises).then(results => {
  this.setState({Ids: results});
})
.catch((error) => {
  console.log(error);
});

值
Promise.all
解析为始终是一个数组-它没有
.data
属性。听起来每个
fetch
结果都会返回一个带有
data
属性的对象，所以您应该在
映射中执行，而不是在
Promise中执行。所有
都是e另一个是
console.log（error）；
s正在记录一些东西？Hi@CertainPerformance.console中没有错误。
Promise.all（promissions）。然后（results=>{this.setState（{id:results.data}）；console.log（results）；}）
数据不在这里是
console.log（error）中的任何一个
s正在记录一些东西？Hi@CertainPerformance。控制台中没有错误。
Promise.all（promises）。然后（results=>{this.setState（{id:results.data}）；console.log（results）；}）
数据不在这里hi@Rikin。你是对的。promise.all部分中的数组在控制台中未定义。现在数据来了。该控制台正在工作。但仍然有一个挑战。数据仍然不在状态。promise.all（promises）。然后（response=>{this.setState（{Ids:response.data}）；//仍然没有数据console.log（response）；//这正在工作。在console}）构造函数（props）中显示数据{super（props）；this.state={Ids:[]}；console.log（this.state.Ids）；//仍然没有数据}@Raza我想你只需要查看console.log中对象的形状并进行相应的调整。可能是它的
response.data.data
？如果不知道它是如何登录到控制台中的，我就说不出来了。如果你不确定，请尝试
console.log（JSON.stringify（response.data））
让我知道，我会指给你看。非常感谢@Rikin。它现在可以工作了。上一个问题是由于
this.setState（{id:response.data}）引起的
我将.data与response连接起来。非常感谢alotHi@Rikin。你说得对。promise.all部分中的数组在控制台中没有定义。现在数据来了。该控制台正在工作。但仍然有一个挑战。数据仍然不在状态。promise.all（promises）。然后（response=>{this.setState）({Ids:response.data}）；//仍然没有数据console.log（response）；//这正在工作。在console}）构造函数（props）中显示数据{super（props）；this.state={Ids:[]}；console.log（this.state.Ids）；//这里仍然没有数据}@Raza我想你只需要查看console.log中对象的形状并进行相应的调整。可能是它的
response.data.data
？如果不知道它是如何登录到控制台中的，我就说不出来了。如果你不确定，请尝试
console.log（JSON.stringify（response.data））
让我知道，我会指给你看。非常感谢@Rikin。它现在可以工作了。上一个问题是由于
这个.setState（{Ids:response.data}）；
我将.data与response连接在一起。非常感谢