从API提取数据时，太多重新呈现React错误 [英] Too many re-renders React error while fetching data from API

问题描述

我正在构建一个简单的配方应用程序，并且从API提取数据时遇到了问题，因为该代码似乎在每个渲染器上都运行，而且我什至不理解为什么它会重新运行，因为我发现如果添加了依赖项数组，它应该只运行一次，对吧?

I am building a simple recipe app and I have a problem with fetching my data from the API, because the code seems to run on every render and I do not even understand why it re-runs since I found that if I add the dependency array, it should run only once, right ?

App.js

function App() {
  const [recipesList, setRecipesList] = useState([]);
  let [scroll, setScroll] = useState(0)



console.log(recipesList,"list");

  return (
    <div className="App">
      <a href="index.html"><img className="logo" src={logo} alt="Logo"/></a>
      <Recipes recipesList={recipesList}  getRecipes={setRecipesList} />
    </div>
  );
}

export default App;

Recipes.js

import React, {useEffect, useState} from "react";
import Recipe from "../Recipe/Recipe";
import "./Recipes.css";

const Recipes = (props) => {

useEffect( () => {
    if (props.recipesList.length === 0) {
        fetch("myapi.com/blablabla")
        .then(res => res.json())
        .then(result => {
            props.getRecipes(result.recipes);
            }
        )
    }
    else {
        console.log("Do not fetch");
    }
    return () => console.log("unmounting");
        
}, [props])




const recipeComponent = props.recipesList.map( (item) => {
        return <Recipe className="recipe" info={item}/>
    })
    return(
        <div className="recipes">
            {recipeComponent}
            <h1>Hello</h1>
        </div>
    )
}


export default Recipes;

推荐答案

尝试以下代码:

function App() {
  const [recipesList, setRecipesList] = useState([]);
  let [scroll, setScroll] = useState(0)

const getListPropd = (e) => {
setRecipesList(e)
}
console.log(recipesList,"list");

  return (
    <div className="App">
      <a href="index.html"><img className="logo" src={logo} alt="Logo"/></a>
      <Recipes recipesList={(e) => getListPropd (e)}  getRecipes={setRecipesList} />
    </div>
  );
}

export default App;

const [checkData , setCheckData ] = useState(true)

useEffect( () => {
    if (checkData) {
        fetch("myapi.com/blablabla")
        .then(res => res.json())
        .then(result => {
            props.recipesList(result.recipes);
            }
        if(props.recipesList.length > 0) {
          setCheckData(false)
         }
        )
   
    else {
        console.log("Do not fetch");
    }


    return () => console.log("unmounting");
        
}, [checkData])

这篇关于从API提取数据时，太多重新呈现React错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！