编辑。我重新编写了代码，使其更加简约。下面的代码是我的问题的峰值测试。
这是该问题的视频：
我有两个组件。
第一个组件名为 TextEditor（它是一个文本编辑器），但它的内容无关紧要——该组件可以是任何东西。带有文本的简单 div 也同样相关。
下一个组件名为 Workflows，用于呈现来自 IndexDB 的集合（使用 Dexie.js 库）。我将这个集合命名为“工作流”，我存储它们的状态变量被命名为workflows_list_array
我正在尝试做的是以下内容：
当页面加载时，我想检查是否有任何工作流具有特定 ID 。如果有，我会将它们存储在 workflows_list_array 中并呈现它们。这部分我不需要帮助。
但是，如果不存在具有上述条件的工作流，我希望隐藏名为 Workflows 的组件并呈现名为 TextEditor 的组件。如果工作流确实存在，我希望隐藏文本编辑器并显示工作流
问题是，即使我让它工作，当工作流确实存在时（当工作流_list_array 被填充时），文本编辑器在隐藏之前短暂地“闪烁”，然后显示工作流组件。
我可以说这是一个异步问题，但我不知道如何解决它。
我在下面发布了代码，并试图将其保持在最低限度。
测试.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