嵌套javascript获取返回[object promise]值

我试图呈现一个表，其中每一行（1,2,3）都有可扩展的行（a、b、c）。行将从API/行获取数据，可扩展行将从API/行ID？可扩展行获取数据。按如下方式渲染时，可展开行将跟随其行：

row  col1 col2 col3
1     x    x    x
a     x    x    x
b     x    x    x

2     x    x    x
a     x    x    x  

3     x    x    x
a     x    x    x   

这是我的密码

class Table extends Component {
  constructor(){
    super();
    this.state={ rowList: [] }
  }
  componentDidMount() {
    fetch(API/rows)
     .then(results=>{return results.json()})
     .then(rows =>{
         let rowList= rows.map(row=> {
             return (
               <react.Fragment>
                <tr><td>{row.info}</td></tr>
                {this.getExpandableRow(row.id).then(exrows=>{return exrows})}
               </react.Fragment>
              )
         })
        this.setState(rowList: rowList);
      })
  }

  getExpandableRow(id) {
     return fetch(api/rowid?expandableRows)
               .then(results=>{return results.json();})
               .then(expandData=>{
                     data.map(dat=>{
                       return (
                              <tr><td>expandrow.info</td></tr>
                              )
                     })
                    console.log(expandData)
                })
  }

  render(){
      return (<Table>{this.state.rowList}</Table>)
  }

}

类表扩展组件{
构造函数（）{
超级（）；
this.state={rowList:[]}
}
componentDidMount（）{
获取（API/行）
.then（results=>{return results.json（）}）
。然后（行=>{
让rowList=rows.map（row=>{
返回(
{row.info}
{this.getExpandableRow（row.id）.then（exrows=>{return exrows}）}
)
})
this.setState（行列表：行列表）；
})
}
getExpandableRow（id）{
返回获取（api/rowid？可扩展行）
.then（results=>{return results.json（）；}）
。然后（expandData=>{
data.map（dat=>{
返回(
expandrow.info
)
})
console.log（expandData）
})
}
render（）{
返回（{this.state.rowList}）
}
}

现在的问题是，我可以在console.log中看到expand数据，但在rows循环中调用getExpandableRows函数时，无论使用{this.getExpandableRow（row.id）}还是{this.getExpandableRow（row.id）}，然后（exrows=>{return exrows}}），我都会遇到错误：对象作为react子对象无效（找到：[object promission]），如果要呈现子对象集合，请改用数组。

---

在循环行时，如何获取可扩展行数据？提前感谢。

我还没有测试过这个，但我认为您可能可以通过以下方式逃脱：

componentDidMount() {
    fetch(API/rows)
     .then(results=>{return results.json()})
     .then(async rows =>{
         // this will be an array of promises
         let rowExpPromiseList = rows.map(row=> {
             return this.getExpandableRow(row.id);
         });
         // I believe this will be an array of components at this point
         const rowExpList = await Promise.all(rowExpPromiseList);
         const rowList = rows.map((row, index) => (
               <react.Fragment>
                <tr><td>{row.info}</td></tr>
                {rowExpList[index]}
               </react.Fragment>
              ));
         this.setState(rowList: rowList);
      })
  }

componentDidMount（）{
获取（API/行）
.then（results=>{return results.json（）}）
。然后（异步行=>{
//这将是一系列的承诺
让rowExpPromiseList=rows.map（row=>{
返回此.getExpandableRow（row.id）；
});
//我相信这将是一个组件阵列在这一点上
const rowExpList=等待承诺.all（rowExpPromiseList）；
const rowList=rows.map（（行，索引）=>(
{row.info}
{rowExpList[index]}
));
this.setState（行列表：行列表）；
})
}

---

在您尝试呈现需要它们的react组件之前，您将获得可展开的行。

使函数

异步

和

返回等待获取（//…

。

。然后（results=>{return results.json（）；}）

具有不必要的

返回

和

。然后（expandData=>{…}）缺少一个<代码>返回<代码>。您不能在这样的反应呈现组件的中间使用承诺，<代码> {这个.GETExpDababeRoW（RO.ID）。然后（ExxRe=＞{返回Ex}}）}

这回答了你的问题吗？嗨，TKoL，非常感谢你的回答，在我尝试了你的代码后，它没有给我任何错误，但可扩展行也没有出现，我在后面添加了一个console.log，它只是返回逗号，不太确定出了什么问题。它只是返回了一个逗号？这没有意义，

等待承诺。all（）

应该提供一个数组。您不能在应用程序中设置断点以查看值是什么吗？我的webstorm调试有一些问题，无法正常运行，但我尝试了以下方法：让rowExpPromiseList=rows.map（row=>{return this.getExpandableRow（row.id）；}）；console.log（rowExpPromiseList）；const rowExpList=wait Promise.all（rowExpPromiseList）；console.log（rowExpList）；第一个控制台返回三项：[对象承诺][对象承诺][对象承诺]这很有意义，因为我的api有三行，每行都返回了一个可扩展行数组，但是第二个console.log刚刚返回：，hi TKoL，非常感谢您的帮助，我让它工作了，刚刚将getExpandableRows更改为：async getExpandableRow（id）{const data=Wait fetch（api/rowid？expandableRows）。然后（results=>{return results.json（）；}）。然后（expandData=>{return data}）const expData=data.map（dat=>{return（expandrow.info）}）console.log（expandData） }