gpt4 book ai didi

javascript - React - 显示隐藏两个元素而不在页面加载时闪烁

转载 作者:行者123 更新时间:2023-12-03 13:52:59 25 4
gpt4 key购买 nike

编辑。我重写了代码,使其更加简约。下面的代码是我的问题的尖峰测试。

这是有关该问题的视频:

/image/EhItK.jpg

我有两个组件。

第一个组件名为 TextEditor(它是一个文本编辑器),但其内容无关 - 该组件可以是任何东西。一个带有文本的简单 div 也同样相关。

下一个组件名为 Workflows,用于渲染 IndexDB 中的集合(使用 Dexie.js 库)。我将此集合命名为“workflows”,并将它们存储在其中的状态变量名为 workflows_list_array

我想做的是:

当页面加载时,我想检查是否有任何工作流程具有特定的 ID 。如果是,我将它们存储在工作流列表数组中并渲染它们。我不需要这部分的帮助。

但是,如果不存在符合上述条件的工作流程,我想隐藏名为 Workflows 的组件并呈现名为 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工作流程

关于javascript - React - 显示隐藏两个元素而不在页面加载时闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58704251/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com