Как использовать информацию, полученную в классе, в функции React Axios - PullRequest
Новая
       0

Как использовать информацию, полученную в классе, в функции React Axios

0 голосов
/ 05 мая 2020

Я новичок в реакции, и я хочу получить список элементов из API, используя Ax ios в классе реакции, а затем я хочу использовать эту информацию в функции реакции: 

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 не работает, и я не получаю никакой информации / не показываю никакой информации. как правильно это реализовать?

Ответы [ 2 ]

1 голос
/ 05 мая 2020

С изменениями ниже вы сможете получить данные

JobGetter 

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

Jobs 

export default function Jobs ({ jobs }) {

OR 

export default function Jobs (props) {
  const { jobs } = props;
0 голосов
/ 05 мая 2020

JobGetter 

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

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>

Node: вы смешиваете функциональные компоненты с классами.

...