项目未在 useEffect 中加载
Items not loading in useEffect in react
这是我的反应组件:
import { ApiClient } from 'admin-bro'
import { Box } from '@admin-bro/design-system'
import React, { useEffect, useState } from "react";
// import './gallery.css';
const api = new ApiClient()
const Gallery = () => {
const [data, setData] = useState({})
useEffect(() => {
api.getPage({pageName: 'Gallery'}).then((response) => {
setData(response.data)
})
}, [])
console.log(data);
console.log(data.imageNameArray);
return (
<section id="list-view">
{data.imageNameArray && data.imageNameArray.map(name=>{
<h3>Hello</h3>
// <div className="card" style="width: 18rem;">
// <img className="card-img-top" src={"/images/"+name} alt="Card image cap"/>
// <div className="card-body">
// <h5 className="card-title">Name: {name}</h5>
// <h5 className="card-title">Size: 15kb</h5>
// <a href="#" classNamr="btn btn-danger">Delete</a>
// </div>
// </div>
})}
</section>
)
}
export default Gallery
我的后端:
Gallery: {
label: "Gallery Images",
handler: async (req, res, context)=>{
const imageNameArray = await getImagesUrl();
return {
imageNameArray: imageNameArray
}
},
component: AdminBro.bundle('../views/admin/dashboard/gallery.jsx')
},
我从后端发送数据,console.log 给了我我需要的数组,但我最终没有在 html 中得到任何东西。我在控制台上得到了数组。我已经将 async readdir 与 util.promisify 一起使用,并将文件名作为数组发送。有人可以给我一些见解吗?
问题出在你的箭头函数上
data.imageNameArray && data.imageNameArray.map(name=>{<h3>Hello</h3>})}
没有 return 任何东西。删除 {}
或添加 return
关键字。
name => element
是(name) => {return element;}
的缩写,按照你的说法,就是name => {element; return;}
这是我的反应组件:
import { ApiClient } from 'admin-bro'
import { Box } from '@admin-bro/design-system'
import React, { useEffect, useState } from "react";
// import './gallery.css';
const api = new ApiClient()
const Gallery = () => {
const [data, setData] = useState({})
useEffect(() => {
api.getPage({pageName: 'Gallery'}).then((response) => {
setData(response.data)
})
}, [])
console.log(data);
console.log(data.imageNameArray);
return (
<section id="list-view">
{data.imageNameArray && data.imageNameArray.map(name=>{
<h3>Hello</h3>
// <div className="card" style="width: 18rem;">
// <img className="card-img-top" src={"/images/"+name} alt="Card image cap"/>
// <div className="card-body">
// <h5 className="card-title">Name: {name}</h5>
// <h5 className="card-title">Size: 15kb</h5>
// <a href="#" classNamr="btn btn-danger">Delete</a>
// </div>
// </div>
})}
</section>
)
}
export default Gallery
我的后端:
Gallery: {
label: "Gallery Images",
handler: async (req, res, context)=>{
const imageNameArray = await getImagesUrl();
return {
imageNameArray: imageNameArray
}
},
component: AdminBro.bundle('../views/admin/dashboard/gallery.jsx')
},
我从后端发送数据,console.log 给了我我需要的数组,但我最终没有在 html 中得到任何东西。我在控制台上得到了数组。我已经将 async readdir 与 util.promisify 一起使用,并将文件名作为数组发送。有人可以给我一些见解吗?
问题出在你的箭头函数上
data.imageNameArray && data.imageNameArray.map(name=>{<h3>Hello</h3>})}
没有 return 任何东西。删除 {}
或添加 return
关键字。
name => element
是(name) => {return element;}
的缩写,按照你的说法,就是name => {element; return;}