我如何在 React 中使用 unirest API 调用？

Question

我是第一次使用 unirest API 调用和 React，我在实现 unirest 调用时遇到了问题。虽然它在一个简单的 Node.js 程序中工作，但如果我尝试将下面的代码插入 React.js 文件并使用它，由于某种原因我无法获得任何结果，因为我只是得到返回一个未定义的对象。

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);
});

但是，当我将其插入准系统 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 } ]

Answer 1

Unirest 适用于 Node（服务器端）...客户端（浏览器）已内置提取...

这是对 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

我如何在 React 中使用 unirest API 调用？

How can I use unirest API calls in React?

node.js

unirest

reactjs