在我的功能组件中使用setState()后， React JS页面变成了空白

Question

在我尝试使用setState函数(setcategory和setvalue在此代码中)之前，代码是正确的，但在我这样做之后，我的反应页面变成了空白。出了什么问题，我该如何解决?

import Employee_card from './Employee_card'
import '../styles/home.css'
import {
Link,
useSearchParams
} from 'react-router-dom'
const Employee_dir:React.FC <props> = (employes) => {
const [category, setcategory] = useState("")
const [value, setvalue] = useState("")
let [searchParams]=useSearchParams();

if(searchParams){
setcategory(searchParams.get('category')!)
setvalue(searchParams.get('value')!)
}
return (
<div>
Some code here which is alright
<div/>
)
}```
export default Employee_dir

Answer 1

用useEffect

useEffect(() => {
if(searchParams){
setcategory(searchParams.get('category')!)
setvalue(searchParams.get('value')!)
}
}, [searchParams])

Answer 2

这一行就是导致这个问题的原因

if(searchParams){
setcategory(searchParams.get('category')!)
setvalue(searchParams.get('value')!)
}

如果searchParams为true，则会发生无限渲染循环。(react中的状态更新将导致组件代码再次执行(重新渲染))。为了避免这种情况，你可以将它包装在useEffect块

中

useEffect(()=> {
if(searchParams){
setcategory(searchParams.get('category')!)
setvalue(searchParams.get('value')!)
}
}, [searchParams])

这里的useEffect块只会在searchParams的值发生变化时执行(类别和值的状态更新)