Node.js 如何在React中使用unirestapi调用？

我正在处理

unirest

API调用，这是我第一次做出反应，但我在实现

unirest

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

但是，当我将其插入到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>
    )
  }

Unirest用于节点（服务器端）。。。客户端（浏览器）已在

下面是一个简单的get请求示例：

类应用程序扩展组件{
状态={用户：[]}；
componentDidMount（）{
取回（“https://randomuser.me/api/?results=10&nat=us")
.then（results=>results.json（））
。然后（数据=>{
const users=data.results；
this.setState（{users:users}）；
})
.catch（err=>console.log（err））；
}
render（）{
返回(
{this.state.users.map（（用户，索引）=>{
返回(
{user.name.first}
);
})}
);
}
}

---

这里有一个相同的工作示例：

请展示一个小示例，以说明您如何尝试使用ReactSorry执行此操作；更新了OP.

callAPI（）

不会返回任何内容，因此它默认返回

undefined

.Hm，但它仍然应该在控制台中打印一些内容，对吗？我在控制台中得到了一个

未定义的
对象，用于
结果.body
，但是
结果.status
和
结果.headers
在控制台中显示得很好。很好。我不熟悉unirest，所以我不确定这里发生了什么。
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>
    )
  }

[ { 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 } ]

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