反应-显示隐藏两个元素而不会在页面加载时闪烁 [英] React - show hide two elements without flickering on page load
问题描述
编辑.我重写了代码,使其更加简约.以下代码是我的问题的峰值测试.
Edit. I rewrote the code to be even more minimalist. The below code is a spike test of my issue.
以下是该问题的视频:
我有两个组成部分.
第一个组件名为TextEditor(它是一个文本编辑器),但是其内容无关紧要-该组件可以是任何东西.一个简单的带有文本的div也将是相关的.
The first component is named TextEditor (and it is a text editor) but its content is irrelevant - the component could be anything. A simple div with text would be just as relevant.
下一个组件名为Workflows,用于从IndexDB渲染集合(使用Dexie.js库).我将此集合命名为工作流",并将它们存储在其中的状态变量命名为workflows_list_array
The next component is named Workflows and is used to render a collection from IndexDB (using the Dexie.js library). I named this collection "workflows" and the state variable I store them in is named workflows_list_array
我想做的是以下事情:
页面加载后,我想检查是否有任何工作流程具有特定的ID.如果有,我将它们存储在workflows_list_array中并进行渲染.我不需要这部分的帮助.
When the page loads, I want to check if any workflows have a specific ID . If they do, I store them in workflows_list_array and render them. I don't need help with this part.
但是,如果不存在符合上述条件的工作流,则我想隐藏名为Workflows的组件,并渲染名为TextEditor的组件.如果确实存在工作流程,则希望隐藏TextEditor并显示工作流程
However, if no workflows with the aforementioned criteria exist, I want to keep the component named Workflows hidden and render the component named TextEditor. If workflows do exist, I want the TextEditor hidden and to display Workflows
问题是,即使我可以正常工作,当工作流确实存在时(填充workflows_list_array时),TextEditor也会在隐藏之前短暂地闪烁",然后显示工作流"组件.
The problem is that even though I have it working, when workflows do exist (when workflows_list_array is populated) the TextEditor "flickers" briefly before being hidden and then the Workflows component is displayed.
我可以说这是一个异步问题,但我不知道如何解决.
I can tell this is an async issue but I can't tell how to fix it.
我在下面发布了代码,并试图将其保持在最低限度.
I posted code below and I tried to keep it to a minimum.
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获得数据,例如:
Why don't you include a flag which indicates if you have already got data from IndexDB, something like:
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
When the process finishes, finally
will be executed and set loading
state to false, after that, your app will render TextEditor
or Workflows
这篇关于反应-显示隐藏两个元素而不会在页面加载时闪烁的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!