Reactjs 如何修复离子列表组件闪烁？（反应）

我是离子/反应编程新手。我目前正在构建一个连接到Google Firebase的应用程序，并自动调用我在那里的云firestore

我有一个页面，呈现一个离子组件和两个自定义离子列表组件。列表中的项目在单击时会显示提示用户的警报

我注意到，每当我点击列表并打开警报时，当离子页面刷新以显示警报时，离子列表组件就会闪烁。当我关闭警报时，该组件也会闪烁

规则集.tsx

  const Rulesets: React.FC = () => {
  const [loading, setLoading] = useState(true)
  const [rulesList, setRulesList] = useState([])
  const [userRulesList, setUserRulesList] = useState([])
  const [downloadRules, setDownloadRules] = useState(false)
  const [deleteRules, setDeleteRules] = useState(false)
  const [focusedRulesetName, setFocusRulesetName] = useState("")
  const [focusedRulesetId, setFocusRulesetId] = useState("")
  const [focusedRulesetVersion, setFocusRulesetVer] = useState("")

  useEffect(() => {
    getUserRulesets().then((rulesets: any) => {
      if(rulesets){
        setUserRulesList(rulesets)
        console.log("Use effect setting user rules list.")
      }
      else{
        console.log("Use effect found no rulesets found for user.")
      }
    }).finally(() => setLoading(false))
  }, [])

  useEffect(() => {
    getRulesets().then((rulesets: any) => {
      if(rulesets){
        setRulesList(rulesets.map((rule: {rule: []}) => rule))
        console.log("Use effect setting available rules list.")
      }
    }).finally(() => setLoading(false))
  }, [])

  function updateUserRulesList(){
    getUserRulesets().then((rulesets: any) => {
      if(rulesets){
        console.log("Current user rules list: ",userRulesList)
        console.log("New user rules list: ", rulesets)
        if(rulesets === userRulesList){
          console.log("Rules unchanged.")
        }
        setUserRulesList(rulesets)
      }
      else{
        console.log("No rulesets found for user.")
        setUserRulesList([])
      }
    })
  }

  function openAlert(check: boolean, alertName: string, rulesetId: string, rulesetName: string, rulesetVer: string){
    setFocusRulesetName(rulesetName)
    setFocusRulesetId(rulesetId)
    setFocusRulesetVer(rulesetVer)
    
    if(alertName === "download"){
      setDownloadRules(check)
    }
    else{
      setDeleteRules(check)
    }
  }

  const RulesetItem = (prop: {id: string, name: string, version: string}) => {
    var installed = false
    var rule: {id: string}

    for(rule of userRulesList){
        if(rule.id === prop.id){
          installed = true
        }
      }
    
    if(installed){
      return (
        <IonItem key={prop.id+ "-available"}>
        <IonLabel>
          <h2>{prop.name}</h2>
          <h3>Version: {prop.version}</h3>
          <p>Installed</p>
        </IonLabel>
      </IonItem>
      )
    }
    return (
      <IonItem key={prop.id+ "-available"} button={true} onClick={() => openAlert(true, "download", prop.id, prop.name, prop.version)}>
      <IonLabel>
        <h2>{prop.name}</h2>
        <h3>Version: {prop.version}</h3>
      </IonLabel>
    </IonItem>
    )    
  }

  const DownloadAlert = () => {
    return (
      <IonAlert
        isOpen={downloadRules}
        onDidDismiss={() => setDownloadRules(false)}
        header={'Download Ruleset?'}
        subHeader={focusedRulesetName}
        message={'This will install this ruleset.'}
        buttons={[
          {
            text: 'Yes',
            handler: async () => {
              setDownloadRules(false)
              console.log("Downloading rules.")
              setLoading(true)
              await addRulesetToUser(focusedRulesetId, 
                focusedRulesetName,
                focusedRulesetVersion
              ).then(updateUserRulesList).finally(() => setLoading(false))
            }
          }, 
          {
            text: 'No'
          }
        ]}
      />
    )
  }

  const DeleteAlert = () => {
    return (
      <IonAlert
        isOpen={deleteRules}
        onDidDismiss={() => setDeleteRules(false)}
        header={'Delete Ruleset?'}
        subHeader={focusedRulesetName}
        message={'This will uninstall this ruleset.'}
        buttons={[
          {
            text: 'Yes',
            handler: async () => {
              setDeleteRules(false)
              console.log("Deleting rules.")
              console.log("Setting loading to true")
              setLoading(true)
              console.log("Loading set to true.")
              await removeRulesetFromUser(focusedRulesetId, 
                focusedRulesetName,
                focusedRulesetVersion
              ).then(updateUserRulesList).finally(() => setLoading(false))
            }
          }, 
          {
            text: 'No'
          }
        ]}
      />
    )
  }

  const InstalledRulesList = () => {
    if(userRulesList.length !== 0){
      return (
        <IonList lines="full" inset={true}>
        <IonListHeader lines="full">Installed Rules</IonListHeader>
        {userRulesList.map((rule: {id: string, name: string, version: string}) => (
          <IonItem key={rule.id + "-installed"}>
            <IonLabel>
              <h2>{rule.name}</h2>
              <h3>Version: {rule.version}</h3>
              <IonButton slot="end" onClick={() => openAlert(true, "delete", rule.id, rule.name, rule.version)}> 
                Delete
              </IonButton>
            </IonLabel>
          </IonItem>
        ))}
      </IonList>
      )
    }
    return null
  }

  const AvailableRulesList = () => { //Component that flickers
    console.log("Returning available rules.")
    console.log("Ruleslist: ",rulesList)
    return(
      <IonList lines="full" inset={true}>
        <IonListHeader lines="full">Available Rules</IonListHeader>
        {rulesList.map((rule: {id: string, data: {name: string, version: string}}) => (
          <RulesetItem key={rule.id + "ruleset-item"} id={rule.id} name={rule.data.name} version={rule.data.version}/>
        ))}
      </IonList>
    )
  }

  return (
    <IonPage>
      <MainHeader/>
      <IonContent className="ion-content-rulesets ion-padding" fullscreen>
        <InstalledRulesList/> {/*Custom list component*/}
        <AvailableRulesList/> {/*Custom list component*/}
        <DownloadAlert/>
        <DeleteAlert/> 
        <IonLoading duration={0} isOpen={loading}/>
      </IonContent>
    </IonPage>
  )
}

export default Rulesets

const规则集：React.FC=（）=>{
常量[loading，setLoading]=useState（true）
常量[rulesList，setRulesList]=useState（[]）
常量[userRulesList，setUserRulesList]=useState（[]）
常量[downloadRules，setDownloadRules]=useState（false）
常量[deleteRules，setDeleteRules]=useState（false）
常量[focusedRulesetName，setFocusRulesetName]=useState（“”）
常量[focusedRulesetId，setFocusRulesetId]=useState（“”）
const[focusedRulesetVersion，setFocusRulesetVer]=useState（“”）
useffect（（）=>{
getUserRulesets（）。然后（（规则集：任意）=>{
if（规则集）{
setUserRulesList（规则集）
log（“使用效果设置用户规则列表”）
}
否则{
log（“Use effect找不到用户的规则集。”）
}
}).最后（（）=>设置加载（false））
}, [])
useffect（（）=>{
getRulesets（）。然后（（规则集：任意）=>{
if（规则集）{
setRulesList（rulesets.map（（规则：{rule:[]}）=>rule））
log（“使用效果设置可用规则列表”）
}
}).最后（（）=>设置加载（false））
}, [])
函数updateUserRulesList（）{
getUserRulesets（）。然后（（规则集：任意）=>{
if（规则集）{
log（“当前用户规则列表：”，userRulesList）
log（“新用户规则列表：”，规则集）
如果（规则集===用户规则列表）{
log（“规则不变”）
}
setUserRulesList（规则集）
}
否则{
log（“未找到用户的规则集。”）
setUserRulesList（[]））
}
})
}
函数openAlert（检查：布尔，alertName:string，rulesetId:string，rulesetName:string，rulesetVer:string）{
setFocusRulesetName（rulesetName）
setFocusRulesetId（rulesetId）
setFocusRulesetVer（rulesetVer）
如果（alertName==“下载”）{
设置下载规则（检查）
}
否则{
setDeleteRules（检查）
}
}
const RulesetItem=（prop:{id:string，name:string，version:string}）=>{
安装的变量=false
变量规则：{id:string}
for（用户规则列表的规则）{
if（rule.id==prop.id）{
已安装=真
}
}
如果（已安装）{
返回(
{prop.name}
版本：{prop.Version}
安装

)
}
返回(
openAlert（true，“下载”，prop.id，prop.name，prop.version）}>
{prop.name}
版本：{prop.Version}
)    
}
const DownloadAlert=（）=>{
返回(
setDownloadRules（false）}
header={'Download Ruleset？'}
副标题={focusedRulesetName}
消息={'这将安装此规则集。'}
钮扣={[
{
文本：'是'，
处理程序：异步（）=>{
setDownloadRules（错误）
log（“下载规则”）
设置加载（真）
等待addRulesetToUser（focusedRulesetId，
focusedRulesetName，
焦距
).然后（updateUserRulesList）.最后（（）=>setLoading（false））
}
}, 
{
文字：“否”
}
]}
/>
)
}
常量DeleteAlert=（）=>{
返回(
setDeleteRules（false）}
header={'Delete Ruleset？'}
副标题={focusedRulesetName}
消息={'这将卸载此规则集。'}
钮扣={[
{
文本：'是'，
处理程序：异步（）=>{
setDeleteRules（false）
log（“删除规则”）
log（“将加载设置为true”）
设置加载（真）
log（“加载设置为true”）
等待从用户（focusedRulesetId，
focusedRulesetName，
焦距
).然后（updateUserRulesList）.最后（（）=>setLoading（false））
}
}, 
{
文字：“否”
}
]}
/>
)
}
const InstalledRulesList=（）=>{
if（userRulesList.length！==0）{
返回(
已安装的规则
{userRulesList.map（（规则：{id:string，name:string，version:string}）=>(
{rule.name}
版本：{rule.Version}
openAlert（true，“delete”，rule.id，rule.name，rule.version）}>
删除
))}
)
}
返回空
}
常量AvailableRuleList=（）=>{//闪烁的组件
log（“返回可用规则”）
日志（“规则列表：”，规则列表）
返回(
可用规则
{rulesList.map（（规则：{id:string，数据：{name:string，version:string}）=>(
))}
)
}
返回(
{/*自定义列表组件*/}
{/*自定义列表组件*/}
)
}
导出默认规则集

希望这是足够的信息去了。如果需要，我可以添加更多。提前谢谢

编辑：另一个问题是，我是否可以阻止特定组件重新加载，除非它们的状态发生更改