**编辑。**我重写了代码，使之更简洁。下面的代码是我的问题的一个尖峰测试。

以下是该问题的视频：
https://imgur.com/a/WI2wHMl
我有两个部分。
第一个组件名为TextEditor（它是一个文本编辑器），但它的内容是无关紧要的-组件可以是任何东西，一个简单的带有文本的div也是相关的。
下一个组件名为Workflows，用于呈现IndexDB中的集合（使用Dexie.js库）。
我所要做的是：
当页面加载时，我想检查是否有工作流具有特定的ID。如果有，我将它们存储在workflows_list_array中并呈现它们。我不需要关于这部分的帮助。
但是，如果不存在符合上述条件的工作流，则希望隐藏名为Workflows的组件并呈现名为TextEditor的组件。如果存在工作流，则希望隐藏TextEditor并显示Workflows
问题是，即使我让它工作，当工作流确实存在时（填充了workflows_list_array时），TextEditor在隐藏之前会短暂“ Flink ”，然后显示Workflows组件。
我可以告诉这是一个异步问题，但我不能告诉如何解决它。
我在下面发布了代码，并试图将其保持在最低限度。

测试.js

import React, {useState, useEffect} from "react";
import db from "../services"

function Workflows(props){
    return (

          <div>
             <ul>
               {
                props.workflows.map((val,index)=>{

                     return <li key={index}>{val.content}</li>
                })
               }
             </ul>
          </div>
    )
}

function TextEditor(){

    return (

          <div> TextEditor </div>
    )
}

function Test(props){
   let [workflows_list_array, set_state_of_workflows_list_array] = useState([]);

   let [client_id_number, set_client_id_number] = useState(5);
      useEffect(() => { // get all workflows of the selected client per its ID

         db.workflows.toArray((workflows_list)=>{    // iterate through workflows array
               return workflows_list

         }).then((workflows_list)=>{

             workflows_list.forEach((val)=>{

                   if(client_id_number === val.client_id){
                       set_state_of_workflows_list_array((prev)=>{
                          return [...prev, val]
                       });
                   }
             });

         });

    }, []);


    return(
        <div>
          {workflows_list_array.length ? null : <TextEditor/> }
          {workflows_list_array.length ? <Workflows workflows={workflows_list_array}/> : null}

        </div>
    )
}

export default Test

服务.js

import Dexie from 'dexie';
import 'dexie-observable';

var workflowMagicUserDB = new Dexie("WorkflowMagicUserDB");

workflowMagicUserDB.version(1).stores({
    user: "",
    workflows: "++id,client_id,content,title",
    clients: "++id,name",
    calendar_events: "++id,start,end,title"
});

export default workflowMagicUserDB