Javascript 在componentDidMount（）中对嵌套承诺中返回的数据使用React.setState？ export function fetchStoryList(type) { return fetchStoryIds(type) .then((idList) => idList.slice(0,50)) .then((idList) => { /* Pass array of promises from map to Promise.all() */ return Promise.all(idList.map((id) => { return fetchItemById(id) }); }); }

我正在尝试将一些数据放入React应用程序的状态。该流程涉及从HackerNews API获取ID列表，然后获取每个ID并进行额外的API调用以获取与每个ID关联的项。我最终希望在我的组件状态中有一个包含50个项的数组（每个“第二级”获取的结果值）

当我仅从单个“顶级”promise/API调用设置状态时，它工作正常，并且我的状态设置为一个ID数组。当我包括第二个

。然后（）

API调用并尝试映射一系列后续API调用时，我的状态设置为未解析的承诺，然后进行

fetch（）

调用

我确信这是一个问题，因为我对构建适当的异步方法把握不好

有人能帮我找出我做错了什么，最好的做法是什么

我的组件：

从“React”导入React
从“../utils/api”导入{fetchStoryList}
导出默认类事例扩展React.Component{
状态={
故事类型：“顶部”，
故事列表：空，
错误：null，
}
组件安装（）{
设{storyType}=this.state
fetchStoryList（故事类型）
。然后（（数据）=>{
console.log（“数据”，数据）
this.setState（{storyList:data}）
})
.catch（（错误）=>{
console.warn（'获取故事时出错：'，错误）
这是我的国家({
error:`获取故事时出错`
})
})
}
render（）{
返回(
export function fetchStoryList(type) {

  return fetchStoryIds(type)
    .then((idList) => idList.slice(0,50))
    .then((idList) => {

      /* Pass array of promises from map to Promise.all() */
      return Promise.all(idList.map((id) => {
        return fetchItemById(id)
      });

    });
}

一种解决方案是更新
fetchStoryList（）
，以便最终的
.then（）
返回一个承诺，该承诺在映射数组中的所有承诺（即来自
idList.map（…）
）被解析后被解析

export function fetchStoryList(type) {

  return fetchStoryIds(type)
    .then((idList) => idList.slice(0,50))
    .then((idList) => {

      /* Pass array of promises from map to Promise.all() */
      return Promise.all(idList.map((id) => {
        return fetchItemById(id)
      });

    });
}

这可以通过。
Promise.all（）
将数组作为输入来实现，并将在所提供数组中的所有承诺成功完成后完成：

.then((idList) => {
  return idList.map((id) => {
    return fetchItemById(id)
  })
})

您不是在等待某个异步代码“完成”

i、 e

返回您不等待的承诺数组

export function fetchStoryList(type) {

  return fetchStoryIds(type)
    .then((idList) => idList.slice(0,50))
    .then((idList) => {

      /* Pass array of promises from map to Promise.all() */
      return Promise.all(idList.map((id) => {
        return fetchItemById(id)
      });

    });
}

要修复，请使用Promise.all

（还清除了代码以消除冗余）

如果在第2个.then（）中更改返回值的名称对于类似于
slicedIdList
的内容，使其与上面的作用域不同，您是否继续遇到此问题？请确保您也在更改映射的值。
fetchItemById
返回一个您不在等待的承诺-尝试
return Promise.all（idList.map（（id）=>{return fetchItemById（id）}））
或更简洁的代码…
。然后（idList=>Promise.all（idList.map（id=>fetchItemById（id））；
没有问题，但也是
。然后（（item）=>item）
是多余的，删除它哇，这正是我想要的！非常感谢：）非常感谢！！我真的非常感谢你的帮助。
export function fetchStoryList(type) {

  return fetchStoryIds(type)
    .then((idList) => idList.slice(0,50))
    .then((idList) => {

      /* Pass array of promises from map to Promise.all() */
      return Promise.all(idList.map((id) => {
        return fetchItemById(id)
      });

    });
}