React函数组件调用setState后页面空白问题排查与修复

问题原因 #

• 无限重渲染循环：直接在组件顶层执行setcategory和setvalue，每次调用setState都会触发组件重新渲染，渲染时又会再次执行这两个状态更新操作，循环往复导致React无法完成正常渲染，最终页面空白。
• 缺少必要导入：代码中使用了useState但未从react包导入，会引发运行时错误。
• 无效判断条件：useSearchParams()返回的searchParams始终是一个对象，if(searchParams)条件永远为真，会持续触发状态更新。
• 强制非空风险：searchParams.get('category')可能返回null，用!强制断言非空会引发类型错误或运行时异常。

修复方案 #

通过useEffect包裹状态更新逻辑，避免无限循环，同时补全依赖、处理空值：

import React, { useState, useEffect } from 'react';
import Employee_card from './Employee_card'
import '../styles/home.css'
import {
  Link,
  useSearchParams
} from 'react-router-dom'

// 定义props类型（根据实际业务调整）
type Props = {
  employes?: any;
};

const Employee_dir: React.FC<Props> = (employes) => {
  const [category, setcategory] = useState("")
  const [value, setvalue] = useState("")

  const [searchParams] = useSearchParams();
  
  // 仅在searchParams变化时更新状态
  useEffect(() => {
    const newCategory = searchParams.get('category');
    const newValue = searchParams.get('value');
    
    // 避免无意义的状态更新
    if (newCategory !== category) {
      setcategory(newCategory || "");
    }
    if (newValue !== value) {
      setvalue(newValue || "");
    }
  }, [searchParams, category, value]);

  return (
    <div>
         {/* 原有正常代码 */}
    </div>
  )
}

export default Employee_dir

关键修复点 #

• 用useEffect包裹状态更新逻辑，依赖数组中加入searchParams，确保仅当URL查询参数变化时执行更新，打破无限循环。
• 增加值对比判断，避免无意义的状态更新，优化渲染性能。
• 用newCategory || ""替代强制断言，处理null情况，保证状态始终为字符串类型。

内容的提问来源于stack exchange，提问作者Prashanth Yarram