Question

我正在构建一个食谱应用程序和我卡住了没有错误显示或任何可以帮助我的东西，它是我第一次在React中使用APIS而我有点迷失，这就是为什么我要问。

我正在尝试从this API获取数据，我不知道为什么这些属性不会显示在屏幕上，因为我有另一个例子。

我可以在控制台中看到React Developer扩展，该属性被传递到状态，所以很好，我不明白为什么我无法访问或为什么它不呈现。

在另一个示例中，没有从API获取数据，它从json中的本地对象获取数据。当API出现时它是否有效？任何的想法？

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      recipes: []
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    fetch("https://www.themealdb.com/api/json/v1/1/random.php")
      .then(response => response.json())
      .then(json => {
        this.setState({ recipes: json });
      })
      .catch(error => console.log("parsed error", error));
  }

  render() {
    return <div className="box">{this.state.recipes.strMeal}</div>;
  }
}

export default App;

Answer 1

您的代码看起来没问题，但您需要以某种方式呈现您的后端数据：

fetchData() {
  fetch("https://www.themealdb.com/api/json/v1/1/random.php")
    .then(response => response.json())
    .then(json => {
      this.setState({ recipes: json.meals });
    })
    .catch(error => console.log("parsed error", error));
 }

  render() {
    return (
      <div className="box">
        {this.state.recipes.map(m => <p>{m.strMeal}</p>)}
      </div>
    );
  }

recipes是一个带有meals键的json，它是一个数组。数组中的每个元素都有strMeal键（用餐名称）。

React不呈现API数据

1 个答案: