将useState用于微调器时渲染器过多

Question

那里。我需要用钩子制作加载微调器，而我的组件计算一些数据。当它完成时，旋转器应该停止。但当我将useHook设置为true时，我会收到无限的重渲染器。

const myCard = () => {
[loading, setLoading] = useState()
if (condition) {
setLoading(true)

//Some countiong

// When it's over set loading
setLoading(false)
}
return (
<Card loading={loading}>
...Some card content
</Card>
)
}

有人能告诉我我在这里干什么吗？

Answer 1

将加载逻辑放入useEffect Hook

const myCard = () => {
[loading, setLoading] = useState(false) //always specify an initial value
useEffect(() => {
if (condition) {
setLoading(true)

//Some countiong


// When it's over set loading
setLoading(false)
}
},[condition]) //will render when condition change


return (
<Card loading={loading}>
...Some card content
</Card>
)
}