React Modal中使用array.map渲染组件不显示问题求助

点击打开Modal时，希望从API获取数据并通过array.map渲染多个ProductCard组件，但组件始终不显示。API返回状态码200正常，代码实现如下：

状态定义 #

const [visible, setVisible] = useState(false);

const toggleVisible = () => {
   setVisible(!visible);
};

const [app, setApp] = useState([])

useEffect(() => {
  const getApps = async () => {
    try {
      const response = await axios.get("http://192.168.20.2:3000/api/V1/application")
      setApp(response.data)
    } catch (error) {
      console.log("Error cannot get api application")
    }
  }

  if (visible) {
    getApps()
  }
}, [visible])

返回部分代码 #

return (
<div>
  <div className="font-sans">
    <Modal
      open={visible}
      onClickBackdrop={toggleVisible}
      className="w-11/12 max-w-7xl space-y-10 px-24 pb-20"
    >
      <Modal.Header>
        <div className="grid grid-cols-2">
          <div className="grid col-span-1 place-content-start">
            <h1 className="text-4xl font-bold">Smart</h1>
          </div>
          <div className="grid col-span-1 place-content-end">
            <Form>
              <Input className="rounded-full" bordered type="text" placeholder="Search" />
            </Form>
          </div>
        </div>
      </Modal.Header>
      <Modal.Body className="space-y-10">
        <div className="grid grid-cols-3">
          {
            app?.map(app => {
              <ProductCard
                title={app.title}
                subTitle={app.subTitle}
              />
            })
          }
        </div>
      </Modal.Body>
    </Modal>
  </div>
</div>
);

解决方案 #

1. 修复map函数的返回值问题 #

你的map回调函数没有返回ProductCard组件，React无法渲染任何内容。有两种修复方式：

• 方式一：添加return语句

app?.map(app => {
  return <ProductCard
           title={app.title}
           subTitle={app.subTitle}
         />
})

• 方式二：使用箭头函数的隐式返回（去掉花括号）

app?.map(app => (
  <ProductCard
    title={app.title}
    subTitle={app.subTitle}
  />
))

2. 添加唯一key属性 #

React要求列表渲染的元素必须有唯一的key属性，这能帮助React识别列表项的变化，避免不必要的重渲染，同时消除控制台警告。假设你的API返回的每个app对象有唯一的id字段：

app?.map(app => (
  <ProductCard
    key={app.id}
    title={app.title}
    subTitle={app.subTitle}
  />
))

3. 可选：添加加载状态优化体验 #

在API请求过程中，可以添加加载提示，避免用户看到空白内容：

// 新增加载状态
const [loading, setLoading] = useState(false);

// 修改getApps函数
const getApps = async () => {
  try {
    setLoading(true);
    const response = await axios.get("http://192.168.20.2:3000/api/V1/application")
    setApp(response.data)
  } catch (error) {
    console.log("Error cannot get api application")
  } finally {
    setLoading(false);
  }
}

// 在渲染时判断加载状态
<Modal.Body className="space-y-10">
  <div className="grid grid-cols-3">
    {loading ? (
      <div>加载中...</div>
    ) : (
      app?.map(app => (
        <ProductCard
          key={app.id}
          title={app.title}
          subTitle={app.subTitle}
        />
      ))
    )}
  </div>
</Modal.Body>

内容的提问来源于stack exchange，提问作者Uletin