Использование React Props с HTTP-запросом

Question

Я пытаюсь использовать реквизиты в Реагировании для отображения содержимого из динамических API REST. В приведенном ниже примере Im пытается получить данные от http://api.icndb.com/jokes/random/, в которых отображается случайная шутка Чака Норриса. К сожалению, мое приложение возвращает ошибку 500.

Любые идеи по этому поводу?

import React from 'react'; 
import request from 'request'; 

const Api = (props) => { 
    return <div> 
      {request(props.api, (error, response, body) => { 
          if(!error && response.statusCode == 200) { 
           return body; 
          } else { 
           return error; 
          } 
         }) 
      } 
     </div>; 
} 

const Default = (props) => { 
    return (<Api api="http://api.icndb.com/jokes/random/"/>); 
}; 
export default Default; 

Answer 1

Вы определенно не должны выполнять какой-либо вызов api в методе визуализации. Идеальный способ сделать это:

class Api extends React.Component { 

    constructor() { 
    super(); 

    this.state = { 
     data: null 
    } 

    } 

    componentDidMount() { 
    request(this.props.api, (error, response, body) => { 
     if(!error && response.statusCode == 200) { 
      this.setState({data: body}) 
     } else { 
      return error; 
     } 
    }); 
    } 

    render() { 
    const content = this.state.data ? JSON.stringify(this.state.data) : <h3>Loading...</h3> 

    return (
    <div class="content"> 
     {content} 
    </div> 
    ) 
} 
} 

так, что мы сделали:

Мы превратили лица без функционального компонента в компоненте класса ES6, который имеет данные от API, как его состояние.

Когда он инициализирует данные, является нулевым, и как только компонент монтирует его, он сделает вызов api, и как только вызов завершится, и результаты будут возвращены, он обновит свое собственное состояние, которое вызовет повторный запуск метода рендеринга. В идеале вы должны анализировать ответ и правильно вставлять его в пользовательский интерфейс, но в этом случае мы просто превращаем ответ в строку и отображаем ее в DOM.

Информация о componentDidMount https://facebook.github.io/react/docs/react-component.html#componentdidmount

Информация о render() https://facebook.github.io/react/docs/react-component.html#render

Вот рабочая ручка: http://codepen.io/finalfreq/pen/xgqMae

я действительно должен был использовать другую библиотеку апи как request.js вы используете не имеет доступного cdn