通过阅读nextjs文档，getStaticProps应该在用户访问我的网站之前预先呈现我想要的数据。我正在尝试在将图像加载到卡片上之前获取图像。
在我的index.js中
export async function getStaticProps() {
const images = getImages();
return {
props: {
data: await Promise.all(images), // wait for all images to load
}, revalidate: 5
};
}
getImages函数看起来像这个
export function getImages() {
const frameCount = 39;
const data = [];
for (let id = 0; id <= frameCount; id++) {
// add new promise to array
data.push(
fetch(`http://localhost:3000/GeneratedImgs/${id}.png`).then(
(res) => res.url
)
);
}
return data;
}
因此，在index.js中，我将数据传递到一个组件中，该组件将数据传递给下一个/image的另一个组件。
export default function Home({ data }) {
let testCardGrid = <div className="loading"></div>;
if (data !== null) {
mouseCardGrid = <CardGrid data={data} />;
}
return (
<>
<Head>
<title>Mouse</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Header />
{testCardGrid}
<Map />
</>
);
}
CardGrid.js看起来像这样：
export default function CardGrid({ data }) {
let cardArray = [];
let randomNumbers = [];
function getRandomInts(quantity, max) {
const arr = [];
while (arr.length < quantity) {
var candidateInt = Math.floor(Math.random() * max) + 1;
if (arr.indexOf(candidateInt) === -1) arr.push(candidateInt);
}
return arr;
}
randomNumbers = getRandomInts(8, 40);
randomNumbers.forEach((num) => {
cardArray.push({
title: `Card#${num}`,
imageUrl: data[num]
});
});
useEffect(() => {
console.log("cardgrid triggered");
}, []);
return (
<section id="content" className="section-padding">
<div className="container-fluid">
<div className="row">
{cardArray.map((object) => (
<Card title={object.title} imageUrl={object.imageUrl} />
))}
</div>
</div>
</section>
);
}
最后，Card.js文件如下所示：
export default function Card({ title, imageUrl }) {
useEffect(() => {
console.log("card added");
}, []);
return (
<div className="col-lg-3 col-sm-6">
<div className="card text-center">
<Image
priority
className="card-img-top"
src={imageUrl}
height={300}
width={300}
/>
<div className="card-body">
<h2 className="card-text">{title}</h2>
</div>
</div>
</div>
);
}
在我刷新页面几次后，或者当我转到网站上的另一个页面并返回主页时，它会给我错误：
未处理的运行时错误错误：缺少必需的图像"src"；所有物确保你通过了"；src"；支持CCD_ 1组件。接收：{"宽度"：300，"高度"：300}
如果数据为null，我试图显示一个加载div，并认为我可以尝试getStaticProps((方法的重新验证属性，但它也给了我同样的错误。
所以，我不确定我是否理解这一点，因为我认为getStaticProps总是会在页面加载之前获得图像。我在文档中看到，它说它在下一个构建下运行。那么，它只是一次就完成了吗？我是否缺少预渲染的基本概念？请给我你的建议。
我认为这些校正应该在getImages:中完成
export function getImages() {
const frameCount = 39;
const data = [];
for (let id = 0; id <= frameCount; id++) {
// change this to
data.push(`http://localhost:3000/GeneratedImgs/${id}.png`);
}
return data;
}
此外，当尝试测试getRandomInts时，其中一个结果是40，也就是undefined，所以也许你应该将其更改为以下内容：
// remove + 1
// It's also recommended to use `let` instead of `var`
let candidateInt = Math.floor(Math.random() * max);