..Use state error: Too many re-renders React 限制渲染次数以防止无限循环

Posted 2023-02-21

【中文标题】..Use state error: Too many re-renders React 限制渲染次数以防止无限循环

【英文标题】：..Use state error: Too many re-renders React limits the number of renders to prevent an infinite loop

【发布时间】：2021-03-18 19:42:51

【问题描述】：

好吧，我正在尝试从我的 API 获取产品并将它们显示在我的“产品”组件中。一切看起来都很好，如果我不尝试增加count，我可以访问浏览器上的每个产品，但问题是当我尝试在我的 JSX 中使用setCount 增加count 时，我收到以下错误Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

我只想在循环通过Products 时将count 加一。例如，如果我得到 3 products，我希望我的 count 是 1,2，然后是 3。

以下代码是我的productscomponent

import React,  useEffect, useState  from "react";
import  getProductKinds, getProducts  from "../lookup";

function Products() 
  const [count, setCount] = useState(0);
  const [products, setProducts] = useState([]);
  useEffect(() => 
    const myCallBack = (response, status) => 
      if (status === 200) 
        console.log("products resnpose:", response);
        setProducts(response);
      
    ;
    getProducts(myCallBack);
  , []);

  return (
    <div>
      products.map((product) => 
        console.log(count);
        setCount(count + 1);
        if (count === 0) 
          return (
            <div className="card-group container">
              <div className="card shadow" style= width: "18rem" >
                <img
                  className="card-img-top"
                  src="https://dl.airtable.com/.attachmentThumbnails/65708b701baa3a84883ad48301624b44/2de058af"
                  
                />
                <div className="card-body">
                  <p className="card-text">
                    Some quick example text to build on the card title and make
                    up the bulk of the card's content.
                  </p>
                </div>
              </div>
            </div>
          );
        
      )
    </div>
  );


export default Products;

【问题讨论】：

为什么要为count 使用状态变量？ return 语句中的setCount 导致渲染循环。您到底想通过count 状态变量来实现什么？如果您只想渲染第一个 product 项，可以使用索引作为 map 函数中的第二个参数。

其实没什么。当我通过map 中的每个product 时，我只想增加count。

你不应该在 JSX 中使用 setCount(count + 1);，在 useEffect 中使用

你能告诉我区别吗？我的意思是当我尝试在 JSX 中使用 useState 时，为什么会进入无限循环？

@AliZiyaÇEVİK 然后呢？也许您可以提供有关您需要计数变量的更多信息？您打算以后使用它吗？

【参考方案1】：

setCount(count + 1); 在 map 函数内部被调用，每次你的组件进入该 map 函数时都会调用它，更新状态，导致无限循环。

你可以像这样在 useEffect 中增加计数：

useEffect(() => 
    setCount(count+1);
    const myCallBack = (response, status) => 
      if (status === 200) 
        console.log("products resnpose:", response);
        setProducts(response);
      
    ;
    getProducts(myCallBack);
  );

【讨论】：

count 值在我通过每个 product 时没有增加。我只是保持相同的count 值。当我使用map 遍历每个product 时，我想增加count 的值。

如果你想在 map 的每次迭代中增加计数，并且不希望组件重新渲染，你可以使用 React.memo：***.com/questions/59139618/…

是的，现在知道了，你可以使用 React.memo 并阅读如何使用它（它只允许重新渲染某些状态变量）或者你可以只使用 products.map((product , index) 和 index+1 将自动成为您的计数

使用索引可能对这种情况有好处，但我想我只是要创建一个变量并在我循环 products 时增加该变量。

是的，不管用什么。学习 React 的 memoization 可以在以后派上用场。快乐编码