node.js - ReactJS:带有axios调用的异步函数在componentDidUpdate中进行axios调用以返回promise

我的组件代码如下：

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

}

我的问题是我有功能costingAdhoc(id)，作为道具传递给子组件Adhoc。为了能够从axios调用中访问信息，我需要这两个函数都是异步的。

将为每个项目呈现Adhoc类型的子组件，并将其映射到功能adhocsList()中。由于某些原因，这会导致componentDidUpdate()中的axios调用引发此错误：


  对象作为React子对象无效（找到：[object Promise]）。如果
  您本打算渲染子级的集合，请改用数组。


错误指向我设置状态的行。这意味着costingAdhoc(id)函数的异步性质会导致我在componentDidUpdate()函数中的axios调用仅返回promise，而不返回实际数据。

最佳答案

您要声明为子组件的Adhoc组件实际上是一个承诺。
为什么？
默认情况下，声明为async的函数将返回promise，因此即使您返回：

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

您实际上是将其包装在诺言中退还给您。 React组件无法实现。

关于node.js - ReactJS:带有axios调用的异步函数在componentDidUpdate中进行axios调用以返回promise，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59093403/