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

Question

我对多个 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);
        })
      }
    

谢谢大家。

Answer 1

发生这种情况是因为您将其解析为未定义，因此您的所有承诺返回值都是 undefined

将其更改为：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);
                    })
              })
            })
        })
      })

Answer 2

你不是resolveing 任何东西。考虑只在Promise.all 中避免explicit promise construction antipattern 和.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 属性的对象，因此您应该像上面那样在.map 中执行此操作，而不是在Promise.all 中。