React组件中已获取数据无法渲染问题求助

你的代码存在两个核心问题，导致获取到的数据无法在JSX中正常显示：

1. map回调未返回JSX内容 #

在concerts.map的回调函数里，你仅用逗号运算符写了JSX表达式，但没有返回这些内容。当前写法下，回调内部的JSX只是被求值却没有输出，map最终生成的是全为undefined的数组，自然不会渲染任何元素。

2. 错误访问数组属性 #

concerts是一个数组，直接调用concerts.image会得到undefined——数组本身没有image属性，你需要在map循环里访问单个concert对象的对应属性。

修复后的完整代码 #

import React from "react";
import { useEffect, useState } from "react";
import axios from "axios";

export const ConcertLatest = () => {
  const [concerts, setConcerts] = useState([]);

  useEffect(() => {
    const loadConcerts = async () => {
      const response = await axios.get("/data/concerts");
      const rawData = response.data;
      const filteredData = rawData.filter((concert) => {
        return concert.datum >= "2022-09-30";
      });
      setConcerts(filteredData);
    };
    loadConcerts();
  }, []);

  if (!concerts.length) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h1>Newest concerts </h1>
      <div>
        {concerts.map((concert) => (
          <div key={concert.id} className="card">
            <img src={concert.image} style={{ width: 100 }} />
            <div className="card-text">
              <h1>{concert.name}</h1>
              <h2>{concert.datum}</h2>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

关键修复说明 #

• 调整map回调逻辑，直接返回JSX结构，并把单个演唱会的卡片渲染逻辑放入循环内，确保每条数据对应一个独立卡片。
• 给map循环的元素添加key属性（使用演唱会的唯一标识，比如id），符合React列表渲染的规范要求。
• 将concerts.image修正为concert.image，正确访问数组中单个对象的属性。

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