如何將 class 中收到的信息用於 function React Axios

Question

Im new to react and I want to receive a list of items from an API using Axios in a react class, and then I want to use this info in a react function:

export class JobGetter extends Component {
    state = {
    Jobs: [],
  };

  componentDidMount() {
    axios.get('/api/jobs/list-jobs', { headers: headers }).then(res => {
      this.setState({
        Jobs: res.data.map(Jobs => ({
          value: Jobs.id,
          title: Jobs.title,
          companyName: Jobs.company_name,
          InternalCode: Jobs.internal_code,
          department: Jobs.department,
          location: Jobs.location,
          tags: Jobs.tags,
          benefits: Jobs.benefits,
          description: Jobs.description,
          requirements: Jobs.requirements,
        })),
      }, () => {
          console.log(this.state.Jobs);
      });
    });
  }

  render () {
    return (
      Jobs
    )
  }
}

export default function Jobs () {
  const classes = useStyles();

  return (
        <div className='mainBox'>
        <div className={classes.root}>
          <ExpansionPanel style={{ backgroundColor: 'white' }}>
            <ExpansionPanelSummary
              expandIcon={<ExpandMoreIcon />}
              aria-controls='panel1a-content'
              id='panel1a-header'
              style={{ backgroundColor: '#11ed7f' }}
            >
              <Typography className={classes.heading}>Job Opportunity</Typography>
            </ExpansionPanelSummary>
            <ExpansionPanelDetails>
              <Container className='jobContainer'>
                <Typography className={classes.TextHeaders}>
                  <Row>
                    <Col>Title:{Jobs.title} </Col>
                    <Col>Company Name:{Jobs.companyName} </Col>
                    <Col>Internal Code:{Jobs.InternalCode} </Col>
                  </Row>
.....

但我的 GET 請求沒有 function 並且我沒有收到任何信息/顯示任何信息。 實現這一點的正確方法是什么？

Answer 1

通過以下更改，您應該能夠獲取數據

求職者

  render() {
    return <Jobs jobs={this.state.Jobs} />;
  }

工作

export default function Jobs ({ jobs }) {

OR 

export default function Jobs (props) {
  const { jobs } = props;

Answer 2

求職者

import Jobs from './Jobs'

export class JobGetter extends Component {
    state = {
    jobs: [],
  };

  componentDidMount() {
    axios.get('/api/jobs/list-jobs', { headers: headers }).then(res => {
      this.setState({
        jobs: res.data.map(job => ({
          value: job.id,
          title: job.title,
          companyName: job.company_name,
          InternalCode: job.internal_code,
          department: job.department,
          location: job.location,
          tags: job.tags,
          benefits: job.benefits,
          description: job.description,
          requirements: job.requirements,
        })),
      }, () => {
          console.log(this.state.jobs);
      });
    });
  }

  render () {
    return (
      <Jobs jobs={this.state.jobs} />
    )
  }
}

工作

export default function Jobs ({jobs}) {
  const classes = useStyles();

  return (
        <div className='mainBox'>
        <div className={classes.root}>
          <ExpansionPanel style={{ backgroundColor: 'white' }}>
            <ExpansionPanelSummary
              expandIcon={<ExpandMoreIcon />}
              aria-controls='panel1a-content'
              id='panel1a-header'
              style={{ backgroundColor: '#11ed7f' }}
            >
              <Typography className={classes.heading}>Job Opportunity</Typography>
            </ExpansionPanelSummary>
            <ExpansionPanelDetails>
              <Container className='jobContainer'>
                <Typography className={classes.TextHeaders}>
                  {jobs.map(job => (
                    <Row key={`job.value`}>
                      <Col>Title:{Jobs.title} </Col>
                      <Col>Company Name:{job.companyName} </Col>
                      <Col>Internal Code:{job.InternalCode} </Col>
                    </Row>)
                  )}
                </Typography>
              </Container>
            </ExpansionPanelDetails>
        </div>
        </div>

節點：您正在將功能組件與類混合。