Javascript …使用状态错误：太多的重新渲染会限制渲染的数量，以防止无限循环

嗯，我正试图从我的API中获取产品，并将它们显示在我的“产品”组件中。如果我不尝试增加

count

的话，一切看起来都很好，我可以访问浏览器上的每一个产品，但问题是当我在JSX中使用

setCount

尝试增加

count

时，我会遇到以下错误

错误：重新渲染太多。React限制渲染的数量以防止无限循环。

当我在

产品中循环时，我只想将
计数增加一。例如，如果我得到3个
产品
，我希望我的
计数
为1,2，然后是3

以下代码是我的
产品
组件

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"
                  alt="Card image cap"
                />
                <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;


import React，{useffect，useState}来自“React”；
从“./lookup”导入{getProductKinds，getProducts}；
功能产品（）{
const[count，setCount]=useState（0）；
const[products，setProducts]=useState（[]）；
useffect（（）=>{
const myCallBack=（响应、状态）=>{
如果（状态===200）{
日志（“产品resnpose:”，响应）；
产品（响应）；
}
};
getProducts（myCallBack）；
}, []);
返回(
{products.map（（产品）=>{
控制台日志（计数）；
设置计数（计数+1）；
如果（计数==0）{
返回(

一些快速示例文本构建在卡片标题上并制作
把卡片上的大部分内容都放大。

);
}
})}
);
}
出口默认产品；
设置计数（计数+1）
在map函数内被调用，每次组件进入该map函数时都会被调用，更新状态，从而产生无限循环

可以按如下方式递增useEffect内的计数：

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

为什么要将状态变量用于
计数
setCount
导致渲染循环。通过
count
状态变量，您想要实现什么？如果只想为第一个
产品
项渲染，可以在
映射
函数中将索引用作第二个参数。实际上没有什么。当我在
map
中传递每一个
product
时，我只想增加
count
。你不应该做
setCount（count+1）在JSX中，在
useffect
中执行，您能告诉我区别吗？我的意思是，当我试图在JSX中使用它时，为什么
useState
会进入无限循环？@AliZiyaİEVİK然后呢？也许您可以提供更多关于您需要count变量做什么的信息？你打算以后再使用它吗？
count
当我通过每一个
产品时，值并没有增加。我刚刚得到了相同的
计数
值。当我用
map
浏览每一个
产品时，我想增加
count
值。如果你想在map的每次迭代中增加count，并且不想组件重新渲染，你可以使用React。备注：是的，现在知道了，你可以使用React.memo并阅读如何使用它（它只允许对某些状态变量进行重新呈现）或者您可以只使用products.map（（product，index）索引+1将自动成为您的计数使用索引可能对这种情况有好处，但我想我只是要创建一个变量，并在循环
产品时增加该变量。是的，任何可行的方法。学习React的记忆可以在以后派上用场。快乐的编码