Javascript 如何让组件的渲染等待我们在react中获取数据

发布于07月28日

我目前正在为我的Fronted Reaction应用程序添加创建选项，因为我首先想测试Fronted的工作情况，所以我使用了本地存储来存储我的数据.根据我从本地存储接收的数据长度，我将呈现两个不同的组件(如果长度为零，则一个是另一个).我使用useEffect()钩子来获取数据，并防止出现错误"没有定义本地存储".但是，钩子很慢，如果我将一些数据值添加到本地存储中，则实际呈现第二个组件需要大约5/6秒，并且默认情况下，即使本地存储中的数据长度非零，代码也只呈现第一个组件.

代码部分:

export default function Onboard() {
  const [dataValues, setdataValues] = useState('');
  const [redFlag, setredFlag] = useState('');
  useEffect(() => {
    let val;
    val = JSON.parse(localStorage.getItem('DataValues') || '[]') || [];
    setdataValues(val);
    let flag;
    flag = dataValues.length;
    setredFlag(flag);
  }, []);
  const [popup, setpopup] = useState(false);
  const [SelectedAccess, setSelectedAccess] = useState('All');
  return (
    <div>
        {redFlag == 0 ? <Component1 /> : <Component2 />}
    </div>
   )}

这只是代码的一小段.默认情况下，代码呈现Component1，即使本地存储中存储了值，并且呈现Component2需要很长的延迟.任何关于这方面的帮助都将不胜感激.

export default function Onboard() { const [dataValues, setdataValues] = useState([]); const [redFlag, setredFlag] = useState(0); useEffect(() => { let val; try { val = JSON.parse(localStorage.getItem('DataValues')) || []; } catch (error) { val = []; } setdataValues(val); setredFlag(val.length); }, []); const [popup, setpopup] = useState(false); const [SelectedAccess, setSelectedAccess] = useState('All'); return ( <div> {redFlag === 0 ? <Component1 /> : <Component2 />} </div> ); }

Javascript 如何让组件的渲染等待我们在react中获取数据

推荐答案

Javascript相关问答推荐

React Hooks中useState的同步问题

如何通过在提交时工作的函数显示dom元素？

如何使用Echart 5.5.0创建箱形图

单击子元素时关闭父元素(JS)

从页面到应用程序(NextJS)：REST.STATUS不是一个函数

扩展类型的联合被解析为基类型

如何在FastAPI中为通过file：/URL加载的本地HTML文件启用CORS？

在JS中动态创建对象，并将其追加到HTML表中

使用类型：assets资源 /资源&时，webpack的配置对象&无效

如果没有页面重新加载Angular ，innerHTML属性绑定不会更新

基于产品ID更新条带产品图像的JavaScript命中错误

将范围 Select 器添加到HighChart面积图

FileReader()不能处理Firefox和GiB文件

如何在FiRestore中的事务中使用getCountFromServer

与在编剧中具有动态价值的定位器交互

ComponentWillReceiveProps仍在React 18.2.0中工作

每隔一行文本段落进行镜像(Boustrophedon)

Reaction-在同一页内滚动导航(下拉菜单)

MUI-TABLE：MUI表组件中交替行的不同 colored颜色不起作用

使用导航时，路径的所有子组件都必须是路径