Установить переменную с данными REST API - PullRequest
Новая
       6

Установить переменную с данными REST API

0 голосов
/ 29 августа 2018

Я никогда не использовал REST API, и у меня возникают проблемы с поиском, как установить переменную с возвращенным result.data. Я использую Meteor с ReactJs, и console.log ('страны', страны) возвращает undefined, а console.log(result.data) возвращает данные стран. 

export default class CountryPage extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const countries = HTTP.get('https://restcountries.eu/rest/v2/all', (err, result) => {
      console.log(result.data);
      return result.data;
    });
    console.log('countries', countries);
    return (
      <div>  
        <Input type="select" name="countrySelect" id="countrySelect">
          {countries.map(country => (
            <option>{country.name}</option>
          ))}
        </Input>
      </div>
    );
  }
}

Ответы [ 2 ]

0 голосов
/ 29 августа 2018

Здесь мы используем метод жизненного цикла componentDidMount это лучшее место для выполнения вызовов API и настройки подписок 

 export default class CountryPage extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
            countries: []
        }
      }
      componentDidMount() {
        HTTP.get('https://restcountries.eu/rest/v2/all', (err, result) => {
          this.setState({countries:result.data})
        });
      }
      render() {
        const {countries} = this.state;
        return (
          <div>  
            <Input type="select" name="countrySelect" id="countrySelect">
              {countries.map(country => (
                <option>{country.name}</option>
              ))}
            </Input>
          </div>
        );
      }
    }
0 голосов
/ 29 августа 2018

HTTP-запрос является асинхронной задачей. Вам нужно дождаться ответа API, поэтому 

export default class CountryPage extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    HTTP.get('https://restcountries.eu/rest/v2/all', (err, result) => {
        const countries = result.data;
        console.log('countries', countries);
        return (
          <div>  
            <Input type="select" name="countrySelect" id="countrySelect">
              {countries.map(country => (
                <option>{country.name}</option>
              ))}
            </Input>
          </div>
        );
    });
  }
}
...