Как я могу использовать самые неподходящие вызовы API в React? - PullRequest
Новая
       15

Как я могу использовать самые неподходящие вызовы API в React?

0 голосов
/ 23 октября 2018

Я работаю с unirest вызовами API и React впервые, и у меня возникают проблемы с реализацией unirest вызова.Хотя он работает в простой программе Node.js, если я пытаюсь вставить приведенный ниже код в файл React.js и работать с ним, я не могу получить какие-либо результаты по какой-то причине, поскольку я просто получаю неопределенный объект обратно.

console description

var unirest = require('unirest');
unirest.get(--insert url here--)
.header("X-Mashape-Key", --insert key here--)
.header("X-Mashape-Host", "spoonacular-recipe-food-nutrition- 
v1.p.mashape.com")
.end(function (result) {
  console.log(result.status, result.headers, result.body);
});

Однако, когда я подключаю это к файлу barebones Node.js, я возвращаю объект со значениями, которые я хочу.Я боролся с этим в течение нескольких дней - кто-нибудь знает, что я делаю неправильно?

РЕДАКТИРОВАТЬ: Вот как я пытался реализовать это в React: 

import React from 'react';
import './App.css';
var unirest = require('unirest');

class Kitchen extends React.Component {
  callApi() {
    unirest.get(--insert api url--)
    .header("X-Mashape-Key", --insert api key--)
    .header("X-Mashape-Host", "spoonacular-recipe-food-nutrition- 
    v1.p.mashape.com")
    .end(function (result) {
      console.log(result.status, result.headers, result.body);
  });  

  render() {
    return(
      <div className="ingredient-info">
        {this.callApi()}
      </div>
    )
  }

РЕДАКТИРОВАТЬ 2: Вот как выглядит тело ожидаемого объекта: 

[ { id: 556470,
    title: 'Apple fritters',
    image: 'https://spoonacular.com/recipeImages/556470-312x231.jpg',
    imageType: 'jpg',
    usedIngredientCount: 3,
    missedIngredientCount: 0,
    likes: 243 },
  { id: 73474,
    title: 'Apple Turnovers',
    image: 'https://spoonacular.com/recipeImages/73474-312x231.jpg',
    imageType: 'jpg',
    usedIngredientCount: 3,
    missedIngredientCount: 0,
    likes: 48 },
  { id: 47950,
    title: 'Cinnamon Apple Crisp',
    image: 'https://spoonacular.com/recipeImages/47950-312x231.jpg',
    imageType: 'jpg',
    usedIngredientCount: 3,
    missedIngredientCount: 0,
    likes: 35 } ]

1 Ответ

0 голосов
/ 26 октября 2018

Unirest для узла (на стороне сервера) ... Клиент (браузер) извлек запеченный в ...

Вот простой запрос get для https://randomuser.me/ пример: 

class App extends Component {
  state = { users: [] };

  componentDidMount() {
    fetch("https://randomuser.me/api/?results=10&nat=us")
      .then(results => results.json())
      .then(data => {
        const users = data.results;
        this.setState({ users: users });
      })
      .catch(err => console.log(err));
  }

  render() {
    return (
      <div>
        {this.state.users.map((user, index) => {
          return (
            <div key={index}>
              <div>{user.name.first}</div>
              <img src={user.picture.thumbnail} alt="" />
            </div>
          );
        })}
      </div>
    );
  }
}

Вот рабочий пример того же: https://codesandbox.io/s/0yw5n3mm7n

...