我已将反应组件方法的类型更改为async＆amp;他们得到错误后

Question

我已将反应组件方法的类型更改为async＆amp;他们收到此错误后：对象作为React子对象无效（找到：[object Promise]）。以下是我的代码。我在这里评论过以前的工作代码。 如何修复这个reactJs的孩子问题？我知道这个问题是由于该对象不允许作为组件的子元素。异步函数基本上是promise对象。但是，我如何才能使它发挥作用？

import React, { Component } from "react";
import { Container, Grid, Menu, Label, Segment } from 'semantic-ui-react';
import ResponseRenderer from './responseRenderer';
import fetchPastJobs from '../services/fetchPastJobs';

class CurberMenu extends Component {
  constructor(props) {
    super(props);
    this.state = { activeItem: 'status' }
    this.handleItemClick = this.handleItemClick.bind(this);
    this.pastJobStateHandler = this.pastJobStateHandler.bind(this);
    this.SegmentController = this.SegmentController.bind(this);
  }

  handleItemClick(e, { name }) {
    this.setState({ activeItem: name });
  }

  render() {
    return (
      <div className="menu">
        <Container fluid>
          <Grid>
            <Grid.Column width={3} color="grey">
              <Menu fluid vertical tabular>
                <Menu.Item name='status' active={this.state.activeItem === 'status'} onClick={this.handleItemClick} />
                <Menu.Item name='pastJobs' active={this.state.activeItem === 'pastJobs'} onClick={this.handleItemClick} />
                <Menu.Item name='deActivatedAccounts' active={this.state.activeItem === 'deActivatedAccounts'} onClick={this.handleItemClick} />
                <Menu.Item name='payments' active={this.state.activeItem === 'payments'} onClick={this.handleItemClick} />
                <Menu.Item name='frauds' active={this.state.activeItem === 'frauds'} onClick={this.handleItemClick} />
                <Menu.Item name='curbeeLocator' active={this.state.activeItem === 'curbeeLocator'} onClick={this.handleItemClick} />

              </Menu>
            </Grid.Column>
            <Grid.Column stretched width={13}>
              <Segment>
                {this.state.activeItem};
                {this.SegmentController()}
              </Segment>
            </Grid.Column>
          </Grid>
        </Container>
      </div>
    )
  }

  async pastJobStateHandler() {
    // console.log("calling pastjobHandler");
    // fetch('http://localhost:9090/getPastJobs', {
    //   method: 'POST',
    //   body: JSON.stringify({})
    // })
    //   .then((response) => {
    //     if (response.status !== 200) {
    //       return;
    //     }
    //     response.json().then((jobs) => {
    //       console.log(jobs);
    //       // this.setState({ prevJobs: jobs.data})
    //       this.prevJobs = jobs.data;
    //     });
    //   })
    //   .catch((err) => {
    //     console.log(err.message, err.stack);
    //   });

    const data = await fetchPastJobs();

    this.prevJobs = data;

    console.log("data outside: ", this.prevJobs);

    if (this.prevJobs && this.state.activeItem == "pastJobs") {
      console.log("this.state.prevJobs: ", JSON.stringify(this.state.prevJobs));
      return this.prevJobs.map((value, index) => {
        return <ResponseRenderer key={Math.random()} data={value} />
      });
    }
  }

  SegmentController() {
    console.log("inside the segment controller");
    console.log("state: ", this.state.activeItem);
    if (this.state.activeItem === "pastJobs") {
      console.log("executing if statement");
      return this.pastJobStateHandler();
    }
  }
}

export default CurberMenu