Реализация системы на основе классов в компоненте на основе функций React - PullRequest
Новая
       154

Реализация системы на основе классов в компоненте на основе функций React

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

Я новичок в React и JavaScript. Я реализовал компонент, основанный на функциях, который выполняет итерацию в наборе данных и печатает связанные данные на странице. 

function useJobs () {
  const [jobs, setJobs] = React.useState([])
  React.useEffect(() => {
    fetch('/api/jobs/list-jobs', { headers: headers })
      .then(r => r.json())
      .then(setJobs)
  }, [])

  return jobs
}

export default function Jobs () {
  const classes = useStyles()
  const jobs = useJobs()
  return (
    <>
  ....
  {jobs.map(job => (
       <>
       <div className={classes.root} key={job.id}>
       <Container className='jobContainer'>
                    <Typography className={classes.TextHeaders}>
                      <Row>
                        <Col style={{ color: 'black' }}>Title: {job.title} </Col>
                      </Row>
                      <br />

                 <Col>Location: //needs to be implemented </Col>

теперь для части Location, я хочу получить некоторые данные из моего API на основе job.location и показать репрезентативную часть на моей странице, например: 

 state = {
    locationsCountry:[],
    LocationsRegion: [],
  }
componentDidMount () {
 axios.get(`/api/jobs/view-location/${job.location}/`, { headers: headers }).then(
    res => {
       this.setState({
          LocationsCountry: res.data.map(Location => Location.country)
         })
           console.log(this.state.LocationCountry)
       }
   )
axios.get(`/api/jobs/view-location/${job.location}/`, { headers: headers }).then(
    res => {
       this.setState({
          LocationsRegion: res.data.map(Location => Location.region)
         })
           console.log(this.state.LocationRegion)
       }
   )

render() {
return(
<Col>Location: {this.state.LocationsCountry} {this.state.LocationsRegion} </Col> )}

но очевидно, что эта система основана на классах, и я не знаю, как реализовать что-то подобное в моем функциональном примере. как это правильно реализовать?

...