reactjs - 反应中未在 useEffect 中加载的项目

Question

这是我的反应组件：

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 一起使用，并将文件的名称作为数组发送。有人可以让我对此有所了解。

标签： reactjsuse-effectadmin-bro

Answer 1

问题是你的箭头功能

  data.imageNameArray && data.imageNameArray.map(name=>{<h3>Hello</h3>})}

不返回任何东西。删除{}或添加return关键字。

name => element是 的缩写(name) => {return element;}，你有它的方式，它是name => {element; return;}