React调用setState出现Too many re-renders无限重渲染问题求助

• 你将setSearchedProducts状态更新逻辑直接写在了组件顶层渲染流程中，只要input不为空，每次组件渲染都会触发状态更新，而状态更新又会触发组件重新渲染，最终形成无限循环，触发React的重渲染次数限制报错。
• 原有逻辑还存在input清空后无法重置产品列表的缺陷。

方案1：使用useEffect包裹状态更新逻辑 #

把过滤和状态更新逻辑放到useEffect中，仅在input或products发生变化时才执行，避免循环触发渲染：

import { useState, useEffect } from 'react';

// 组件内部代码
const [input, setInput] = useState("");
const [searchedProducts, setSearchedProducts] = useState(products);

const inputChange = (e) => {
  setInput(e.target.value);
};

useEffect(() => {
  if (!input) {
    // 输入为空时重置为完整产品列表
    setSearchedProducts(products);
    return;
  }
  const newProducts = products?.filter(el => 
    el.Name.toLowerCase().includes(input.toLowerCase())
  ) || [];
  setSearchedProducts(newProducts);
}, [input, products]); // 仅依赖input和products变化执行

方案2：使用useMemo计算派生值（更推荐） #

过滤后的产品列表完全由products和input两个值决定，属于派生状态，不需要单独维护state，直接用useMemo缓存计算结果即可，代码更简洁：

import { useState, useMemo } from 'react';

// 组件内部代码
const [input, setInput] = useState("");
const inputChange = (e) => {
  setInput(e.target.value);
};

// 直接计算过滤后的产品列表
const searchedProducts = useMemo(() => {
  if (!input) return products;
  return products?.filter(el => 
    el.Name.toLowerCase().includes(input.toLowerCase())
  ) || [];
}, [input, products]);

内容的提问来源于stack exchange，提问作者Abhilash Poojary