Node.js ReactJS:Async函数和axios调用使axios在componentDidUpdate中调用以返回承诺

我的组件代码如下：

import React, { Component } from 'react';
import axios from 'axios';
import "bootstrap/dist/css/bootstrap.min.css";
import {
    Table
} from 'reactstrap';

const Adhoc = async (props) => {
  let cost = await props.cost(props.adhoc._id)

  return(
    <tr>
      <td>{props.adhoc.jIssue}</td>
      <td>{props.adhoc.paid ? "Paid" : "Not paid"}</td>
      <td>APP{props.adhoc.sprint}</td>
      <td>£{cost.data[0]}</td>
    </tr>
  )}

export default class QAdhocsDisplay extends Component { 
    constructor(props) {
        super(props);

    this.costingAdhoc = this.costingAdhoc.bind(this)

    this.state = {
      adhocs: []
    };
}

componentDidMount() {
    axios.get('http://localhost:5000/adhocs/retrieve')
      .then(response => {
        this.setState({ adhocs: response.data })
      })
      .catch((error) => {
        console.log(error);
      })
}

async costingAdhoc(id) {
  const data = await axios.get('http://localhost:5000/jira/issue/' + id)
      .catch((error) => {
        console.log(error);
      })

  return data;


}

adhocsList() {
    return this.state.adhocs.map(currentadhoc=> {
      return <Adhoc adhoc={currentadhoc} cost={this.costingAdhoc} key={currentadhoc._id}/>;
    })
  }

render(){
    return (
      <div className="toborder" style = {{paddingBottom: "59px"}}>
              <div className="display" style ={{backgroundColor: "#5394b2"}}>
                <h5 style = {{padding:"13px"}}>Adhoc status</h5>
                </div>
                <div className="table">
                <Table size="sm" bordered striped>
                <thead className="thead-light">
                    <tr className="adhocs">
                    <th className="sticky-column medium" >Adhoc issue</th>
                    <th className="sticky-column medium" >Payment status</th>
                    <th className="sticky-column medium" >Sprint</th>
                    <th className="sticky-column medium" >Projected cost</th>
                    </tr>
                </thead>
                <tbody>
                    { this.adhocsList() }
                </tbody>
                </Table>
                </div>
            </div>
    )}

import React，{Component}来自'React'；
从“axios”导入axios；
导入“bootstrap/dist/css/bootstrap.min.css”；
进口{
桌子
}来自“反应带”；
const Adhoc=async（props）=>{
让成本=等待道具成本（道具临时性）
返回(
{props.adhoc.jIssue}
{props.adhoc.paid？“paid”：“notpaid”}
APP{props.adhoc.sprint}
{成本数据[0]}
)}
导出默认类QAdhocsDisplay扩展组件{
建造师（道具）{
超级（道具）；
this.costingAdhoc=this.costingAdhoc.bind（this）
此.state={
adhocs:[]
};
}
componentDidMount（）{
axios.get（）http://localhost:5000/adhocs/retrieve')
。然后（响应=>{
this.setState（{adhocs:response.data}）
})
.catch（（错误）=>{
console.log（错误）；
})
}
异步成本计算DHOC（id）{
const data=等待axios.get（'http://localhost:5000/jira/issue/“+id）
.catch（（错误）=>{
console.log（错误）；
})
返回数据；
}
adhocsList（）{
返回此.state.adhocs.map（currentadhoc=>{
返回；
})
}
render（）{
返回(
临时状态
临时问题
支付状态
冲刺
预计成本
{this.adhocsList（）}
)}

}

我的问题是我有一个函数

costingAdhoc（id）

，我把它作为道具传递给子组件

Adhoc

。为了能够从axios调用访问信息，我需要这两个函数都是异步的

对于处于将在函数

adhocsList（）

中映射的状态的每个项，将呈现类型为

Adhoc

的子组件。出于某种原因，这会导致

componentDidUpdate（）

中的axios调用抛出此错误：

对象作为React子对象无效（找到：[对象承诺]）。如果 要呈现子对象集合，请改用数组

---

错误指向我设置状态的那一行。这意味着

costingAdhoc（id）

函数的异步性质导致我在

componentdiddupdate（）

函数中调用axios只返回承诺，而不返回实际数据。

您的问题是，您声明为子组件的

Adhoc

组件实际上是一个承诺。 为什么？ 默认情况下，声明为

async

的函数返回承诺，因此即使您返回：

<tr>
      <td>{props.adhoc.jIssue}</td>
      <td>{props.adhoc.paid ? "Paid" : "Not paid"}</td>
      <td>APP{props.adhoc.sprint}</td>
      <td>£{cost.data[0]}</td>
</tr>

{props.adhoc.jIssue}
{props.adhoc.paid？“paid”：“notpaid”}
APP{props.adhoc.sprint}
{成本数据[0]}

---

你实际上是把它包在一个承诺里退回的。React组件不能是承诺。

您的问题是，您声明为子组件的组件实际上是承诺。 为什么？ 默认情况下，声明为

async

的函数返回承诺，因此即使您返回：

<tr>
      <td>{props.adhoc.jIssue}</td>
      <td>{props.adhoc.paid ? "Paid" : "Not paid"}</td>
      <td>APP{props.adhoc.sprint}</td>
      <td>£{cost.data[0]}</td>
</tr>

{props.adhoc.jIssue}
{props.adhoc.paid？“paid”：“notpaid”}
APP{props.adhoc.sprint}
{成本数据[0]}

---

你实际上是把它包在一个承诺里退回的。React组件不能是承诺。

正如我在问题中提到的，当我通过

componentdiddupdate（）

方法设置axios调用的状态时，会出现错误。当我不在子组件中包含该方法的结果时，我仍然会得到相同的错误。正如我在问题中提到的，当我从

componentdiddupdate（）

方法设置axios调用的状态时，我会得到错误。当我没有在子组件中包含方法的结果时，我仍然会得到相同的错误。