Question

我是新来的反应者，正在练习从API提取数据并将其存储在状态中，但是每当我调用此函数时，它都会陷入一个循环，在其中每次记录状态。所以，请告诉我我在哪里做错了。

import React, { Component } from "react";
import { APP_ID, API_KEY } from "./auth";

import Navbar from "./components/navbar/navbar";
import FoodFeed from "./components/food-feed/foodFeed";

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

    //Problem here

    getRecipe = async QUERY => {
        const response = await fetch(
            `https://api.edamam.com/search?q=${QUERY}&app_id=${APP_ID}&app_key=${API_KEY}`
        );
        const data = await response.json();
        this.setState({ recipes: [...data.hits] });
        console.log(this.state.recipes);
    };

    render() {
        this.getRecipe("chicken");
        return (
            <>
                <Navbar />
                <FoodFeed />
            </>
        );
    }
}

export default App;

Answer 1

设置状态触发重新渲染。您正在从render内部调用抓取操作，该操作会触发setState，然后触发一个渲染操作，然后再调用fetch，该操作会调用setState，然后触发一个渲染操作……

您应该在lifecycle methods之一（如componentDidMount）中进行数据获取。

您的组件将需要执行以下操作：

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

  getRecipes () => async QUERY => {...}

  componentDidMount () {
    // called once after the component mounts
    const recipes = this.getRecipes();
    this.setState({ recipes });
  }

  render () {
    // this.state.recipes will be empty initially but this will update
    // when you call setState after fetching the data.
    const {recipes} = this.state;
    return (
      <Food recipes={recipes} /> // or whatever
    );
  }

}

Answer 2

是的，setState呈现UI，这意味着它将调用render方法。现在，在render方法中，您正在执行getReceipe，它依次又调用setState，它将再次调用render。

此外，setState是异步方法。如果仅在setState之后打印日志，则不会获得更新结果。要在setState之后获得更新结果，请使用它的回调方法。

setState({
// set the state here
}, ()=> {
// get your updated state here
})

使用componentDidMount方法从服务器获取您的收据数据。

无法在反应中正确设置状态

2 个答案: