Отображение значения массива в ответе API для условной проверки - PullRequest
Новая
       16

Отображение значения массива в ответе API для условной проверки

0 голосов
/ 30 апреля 2018

У меня есть API, который загружает ответ со значением массива, которое мне нужно отобразить, чтобы одновременно проверить, доступны ли, и если да, использовать значение id offers для отображения позже. В настоящее время я могу просто получить параметр available, но мне нужно иметь возможность отобразить значение до offers и получить значение идентификатора в FETCH OFFER DETAILS fetchContent.

ОТВЕТ API 

{
  "available": true,
  "offers": [
    {
      "days_free": 30,
      "id": 1,
    }
  ]
}

Реагирующий компонент 

class CancelOffer extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      user: []
    }
    this.processData = this.processData.bind(this)
    this.cancelAccount = this.cancelAccount.bind(this)
    this.acceptPromo = this.acceptPromo.bind(this)
  }

  componentDidMount () {
    this.fetchContent(this.processData)
  }

  /**
   * Fetch offer details
   */

  fetchContent (cb) {
    superagent
      .get('/api/user/offers')
      .then(function(res) {
        /**
        * If res.body.available === true, get offers.id and use in 
          acceptPromo.
        * Else if not true, redirect to 
         .then(this.props.setStep(ACCEPTANCE))
        */
        if(res.body.available){
          const offerCode = res.body.offers[0].id
          alert(offerCode)
        } else {
          this.props.setStep(ACCEPTANCE)
        }
      })
  }

  /**
   * Set state after user have been fetched
   * @param data
   */
  processData (data) {
    this.setState({
      user: data.body.offers
    })
  }

  /**
  * Send accept promo offer code
  */
  acceptPromo (e) {
    e.preventDefault()
    superagent
      .post('/api/user/offers')
      .send({
        offerId: offerCode <==THIS NEEDS TO COME FROM THE API RESPONSE 
      })
      .then(this.props.setStep(ACCEPTANCE))
  }

  render () {
    const content = this.props.config.contentStrings
    const daysFree = this.state.user.map((daysFree, i) => {
      return (
        <span>{daysFree.days_free}</span>
      )
    })

    return (
      <div className='offer'>
        <h2 className='offer-heading md'>Heading</h2>
        <p className='offer-subpara'>sub paragraph {daysFree}</p>
        <div className='footer-links'>
          <a onClick={this.acceptPromo} className='btn btn--primary btn--lg'>accept promo</a>
          <a onClick={this.cancelAccount} className='cancel-link'>cancel</a>
        </div>
      </div>
    )
  }
}
export default CancelOffer

1 Ответ

0 голосов
/ 30 апреля 2018

РЕДАКТИРОВАТЬ - ОТВЕТ:

Мне нужно было установить промо-код в состояние 

fetchContent (cb) {
superagent
  .get('/api/user/offers')
  .then((res) => {
    if(res.body.available){
      this.setState({
        offerId: res.body.offers[0].id
      })
    } else {
      this.props.setStep(OFFER)
    }
  })
 }

и передайте его в акцию "Принять" 

acceptPromo (e) {
e.preventDefault()
const { offerId } = this.state
superagent
  .post('/api/user/offers')
  .send({offerId})
  .then(this.props.setStep(ACCEPTANCE))
}
...