- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当第一次使用 API 请求加载页面时,它会出错。但是在页面加载后,如果我放回相同的代码,它就可以正常工作。有人可以帮助我在这里缺少什么吗?或者告诉我延迟页面加载直到从 api 加载数据的技巧
import React, { useState, useEffect } from 'react'
export default function ProductPage({ data }) {
const [productData, setProductData] = useState(null)
useEffect(() => {
getProductdata()
}, [])
async function getProductdata(){
const secret = "SECRET"
const request = await fetch(`https://app.myapi.com/api/products/${data.productsCsv.id}`, {
headers: {
'Authorization': `Basic ${btoa(secret)}`,
'Accept': 'application/json'
}
}).then((request => request.json()))
.then(data => setProductData(data))
.catch(err=>console.log(err))
}
console.log("pdata",productData) // returns null on initial load and then it filled with data.
return (
<>
<div className="stock mb-4 ">
<p className="tracking-wider mb-2">Size</p>
{productData.variants.map((variant,index)=>{
<p>{variant.stock}</p>
if(variant.stock != 0){
return (
<button className={`p-2 border-gray-200 border mr-2 mb-2 hover:bg-black hover:text-white cursor-pointer focus:border-black ${activeSize === index ? 'bg-black text-white' : null}`} role="button" tabIndex={0}
onClick={() => {toggleSize(index); setSize(size)}}
onKeyDown={() => {toggleSize(index); setSize(size)}} key={index}>{variant.variation[0].option}-{variant.stock}</button>
)
}
else {
return(
<button className={`p-2 border-gray-200 border mr-2 mb-2 ${variant.stock == 0 ?'bg-gray-400 line-through text-red-500': null}`} disabled role="button" tabIndex={0}
onClick={() => {toggleSize(index); setSize(size)}}
onKeyDown={() => {toggleSize(index); setSize(size)}} key={index}>{variant.variation[0].option}-{variant.stock}</button>
)
}
})}
</div>
</>
)
最佳答案
设置一些状态并返回另一个组件,直到您获得数据,它应该看起来像这样:
import React, { useState, useEffect } from 'react'
export default function ProductPage({ data }) {
const [productData, setProductData] = useState(null)
const [loading, setLoading] = useSate(true) // set some state for loading
useEffect(() => {
getProductdata()
}, [])
async function getProductdata(){
const secret = "SECRET"
const request = await fetch(`https://app.myapi.com/api/products/${data.productsCsv.id}`, {
headers: {
'Authorization': `Basic ${btoa(secret)}`,
'Accept': 'application/json'
}
}).then((request => request.json()))
.then((data) => {
setProductData(data)
setLoading(false) // set Loading to false when you have the data
})
.catch(err=>console.log(err))
}
//use the piece of loading state to return other component until you have the data
if (loading) {
return (<div>Replace me with a loading component...</div>)
}
return (
<>
...
</>
)
关于javascript - 如何延迟页面渲染直到从 api 收到数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67979782/
我有一个静态类。 static class AppDirectory { public static string PACSTEMP = Path.Combine(Path.GetTempPa
我已经设置了一个启用了推送通知的 iOS 应用。 我可以将消息推送到应用程序,例如角标(Badge)计数工作并相应更新。 但我从未在锁屏或其他地方看到标准的推送通知弹出窗口,但手机会振动,因此消息会通
我们有一个带有 Web 应用程序和一堆 Windows 服务的系统,它们在做一些后台工作。 每当我们需要对系统进行更实质性的更改时,我们最终不得不发出 IIS 重置,然后手动重新启动所有相关的 Win
我有以下几行 John SMith: A Pedro Smith: B Jonathan B: A John B: B Luis Diaz: A Scarlet Diaz: B 我需要获得所有获得
我正在编写一个 Java 客户端(在 weblogic 10.3 上)来调用一个安全的网络服务。我已获得安装在 cacerts、DemoIdentity.jks 和 DemoTrust,jks 中的客
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 这个问题似乎偏离主题,因为它缺乏足够的信息来诊断问题。 更详细地描述您的问题或 include a mini
我正在尝试调用void方法addToList,该方法将通过用户传递给它的两个字符串除外。我检查了dataSource类,以确保它确实接受了那些作为参数。问题是我在该方法调用上始终收到标识符>预期错误,
我的任务:使用scanner方法从一行数据中提取字符串、 float 和整数。 数据格式为: Random String, 240.5 51603 Another String, 41.6 59087
这个问题已经有答案了: What causes a java.lang.ArrayIndexOutOfBoundsException and how do I prevent it? (25 个回答)
首先我实例化一个游戏状态 class GameState extends state{ ArrayList levels; int currentLevelID; public GameState()
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
我有一个实现为单例的 Controller 对象,它有一个可以随时驱逐对象的缓存。当一个对象即将被删除时,我想通知任何使用此 Controller 的类,以便它们能够做出适当的响应。我对这种行为的第一
因此,我尝试跨集群发送消息,该消息将包含一个 User 对象,该对象是一个可序列化类。 当我发送 String 或 int 时,它工作正常,消息发送没有问题,并且集群上的所有 channel 都收到它
我试图创建的程序是一个基本游戏,用户输入网格大小,选择 block 接收增加分数的奖品、从分数中夺走分数的强盗或结束游戏的炸弹。我收到堆栈流错误,但我不明白为什么? 抱歉,代码量很大,我只是无法找到问
使用此代码我会得到什么ConcurrentModificationException?我有一个同步(监听器)锁。 private void notifyListeners(MediumRenditio
我想在捕获 DeadlineExceededError 后正确退出。我还剩下多少钱来清理? 例如, try: do_some_work() except DeadlineExceededError
我有 2 个 Intranet 站点: http://intranetv1/ http://intranetv2/ v1基于.NET 1.1,v2基于.NET 3.5 在 v1 上,我创建了一个网页,
我有一个在 Linux 3.12 上运行的 C 程序。该程序产生几个子进程。其中一个进程会生成一个线程,该线程运行一段时间然后终止。当该子进程运行时,它会执行 epoll_wait()。 epoll_
我能够将 APNS 集成到我的应用程序中。现在我想在用户点击它或用户在使用应用程序时收到通知时处理通知。我使用下面的代码在收到通知时显示警报对话框: func application(applicat
当我试图在浏览器上运行这段代码时,出现了以下错误。"错误响应错误代码:501消息:不支持的方法(“POST”)。错误码解释:501-服务器不支持该操作。" 浏览器控制台出现以下错误: "1.加载资源失
我是一名优秀的程序员,十分优秀!