编辑。 我重写了代码以使其更加简约。以下代码是我的问题的峰值测试。
这是有关此问题的视频:
https://imgur.com/a/WI2wHMl
我有两个组成部分。
第一个组件名为TextEditor(它是文本编辑器)，但其内容无关紧要-该组件可以是任何东西。一个简单的带有文本的div同样重要。
下一个组件名为Workflows，用于呈现来自IndexDB的集合(使用Dexie.js库)。我将此集合命名为“工作流”，并将它们存储在其中的状态变量命名为workflows_list_array
我正在尝试做以下事情:
页面加载后，我想检查是否有任何工作流程具有特定的ID。如果有，我将它们存储在workflows_list_array中并进行渲染。我不需要这部分的帮助。
但是，如果不存在符合上述条件的工作流，则我想隐藏名为Workflows的组件，并渲染名为TextEditor的组件。如果确实存在工作流程，则我希望隐藏TextEditor并显示工作流程
问题是，即使我可以正常工作，当工作流确实存在时(填充workflows_list_array时)，TextEditor也会在隐藏之前短暂地“闪烁”，然后显示“工作流”组件。
我可以说这是一个异步问题，但我不知道如何解决。
我在下面发布了代码，并尝试将其降至最低。
Test.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
services.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
最佳答案
为什么不包含一个标志，该标志指示您是否已经从IndexDB获得数据，例如:
function Test(props){
const [loading, setLoading] = React.useState(true);
let [workflows_list_array, set_state_of_workflows_list_array] = useState([]);
let [client_id_number, set_client_id_number] = useState(5);
useEffect(() => {
db.workflows.toArray((workflows_list)=>{
}).then((workflows_list)=>{
}).finally(() => setLoading(false)); //when process finishes, it will update the state, at that moment it will render TextEditor or Workflows
}, []);
if(loading) return <LoadingIndicator/>; // or something else which indicates the app is fetching or processing data
return(
<div>
{workflows_list_array.length ? null : <TextEditor/> }
{workflows_list_array.length ? <Workflows workflows={workflows_list_array}/> : null}
</div>
)
}
export default Test
该过程完成后，将执行
finally并将loading状态设置为false，之后，您的应用将呈现TextEditor或Workflows关于javascript - react -显示隐藏两个元素而不在页面加载时闪烁，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58704251/