需要在Next.js中删除数据后显示网页

Question

我正在使用Next.js，我对Next.js不熟悉;我对javaScript有一些了解我已经写了一些代码来获得我的JSON_file的API(这是我的数据，需要在/blogs网页中显示);

import React from 'react'
const blogs = () => {
var element
(async()=>{
var data=await fetch("http://localhost:3000/api")
data=await data.json();
console.log(data);
console.log(data.length)
for (let index = 0; index < data.length; index++) {
element = data[index];
// document.getElementById(tilte).innerHTML+=element["title"]
console.log(element["title"])
}
})()

在上面的代码中，我写了一些代码从API获取数据，但上面注释的代码(document.getElementById(tilte).innerHTML+=element["title"])不工作，并得到错误(不能读取null的属性(读取'innerHTML'))，但我想在我的网页中打印这个，所以我试图打印返回函数也不工作

return (
<>
<div><h1>
Welcome to my  blogs
</h1>
</div>

<div id="tilte">
{console.log(element["title"])}
</div>
</>
)

}

export default blogs

这里，我尝试console。log返回函数中的元素变量但没有定义，我知道这是因为JavaScript有异步行为

我试图使博客导出功能异步和aw

const blogs = async () => {
var element
await (async () => {

但是作为错误给出(对象作为React子对象无效(found: [object Promise]))。如果您打算呈现子集合，请使用数组代替)

甚至我尝试了一些其他的选项，把返回函数放在生活中，但这甚至不会显示欢迎来到我的博客行

希望解决，，

Answer 1

尝试在获取数据后使用useEffect()和useState()来更新blog的状态，如下所示:

import React, {useEffect, useState} from 'react'
const Blogs = () => {
const [content, setContent] = useState("");
useEffect(() => {
const func = async () =>{
let data = await fetch("http://localhost:3000/api");
data = await data.json();
console.log(data);
console.log(data.length);
for (let index = 0; index < data.length; index++) {
setContent ((prevState) => prevState + data[index]);
}
}
func();
}, []);
return (
<>
<div><h1>
Welcome to my  blogs
</h1>
</div>
<div id="tilte">
{content}
</div>
</>
)
}