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

【问题标题】：nested javascript fetches return [object promise] value嵌套的 javascript 获取返回 [object promise] 值
【发布时间】：2020-04-13 04:10:33
【问题描述】：

我正在尝试呈现一个表格，其中每一行 (1,2,3) 都有可扩展的行 (a,b,c)。 row 将从 API/rows 获取数据，expandable rows 将从 API/rowId?expandableRows 获取数据。像这样呈现时，可扩展行将跟随它的行：

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>)
  }

}

现在的问题是我可以在 console.log 中看到展开数据，但是在行循环中调用 getExpandableRows 函数时，无论使用 {this.getExpandableRow(row.id)} 还是 {this.getExpandableRow(row.id)。然后（exrows => {return exrows}）}，我得到了错误：对象作为react child（found：[object promise]）无效，如果您打算渲染一组孩子，请改用数组。循环行时我应该怎么做才能获得可扩展的行数据？提前致谢。

【问题讨论】：

改为使用函数async 和return await fetch(//...。
.then(results=>{return results.json();}) 有一个不必要的return 而.then(expandData=>{...}) 缺少一个return
你不能在这样的 React 渲染组件中间使用 Promise，{this.getExpandableRow(row.id).then(exrows=>{return exrows})}
这能回答你的问题吗？ How do I return the response from an asynchronous call?

标签： javascript api object promise fetch

【解决方案1】：

我尚未对此进行测试，但我认为您或许可以摆脱这种情况：

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);
      })
  }

在尝试渲染需要它们的 React 组件之前，您会获得可扩展的行。

【讨论】：

您好 TKoL，非常感谢您的回复，在我尝试了您的代码后，它没有给我任何错误，但也没有显示可扩展行，我添加了一个 console.log在之后，它只是返回逗号，不太确定出了什么问题。
它只是返回一个逗号？这没有意义，await Promise.all() 应该给出一个数组。你不能在你的应用程序中设置断点来查看值是什么吗？
我的 webstorm 调试有一些问题，无法正常运行，但我尝试了这个： let rowExpPromiseList = rows.map(row=> { return this.getExpandableRow(row.id); });控制台.log(rowExpPromiseList);常量 rowExpList = 等待 Promise.all(rowExpPromiseList);控制台.log(rowExpList);第一个控制台返回了三个项目： [object promise] [object promise] [object promise] 这很有意义，因为我的 api 有三行，每行返回一个可扩展行的数组，但第二个 console.log 刚刚返回：，，，
嗨 TKoL，非常感谢你的帮助，我让它工作，只是将 getExpandableRows 更改为：async getExpandableRow(id) { const data = await fetch(api/rowid?expandableRows) .then( results=>{return results.json();}) .then(expandData=>{ return data}) const expData = data.map(dat=>{ return ( expandrow.info ) }) console.log(expandData) }