React JS中如何遍历API接口返回的数组类型响应数据

先修正现有代码的小问题 #

• useEffect里调用的getData()属于拼写错误，仅保留getCardData()调用即可
• 你在setCard(data)之后直接打印card[0]无法拿到最新值，因为React的状态更新是异步的，此时card还是更新前的旧值，要验证返回结果可以直接打印data[0]

正确遍历渲染的实现步骤 #

1. 首先确保card状态的初始值设置为空数组，避免首次渲染时报错：

const [card, setCard] = useState([]);

2. 在JSX部分使用数组的map方法遍历渲染即可，示例代码如下：

function CardList() {
  const [card, setCard] = useState([]);
  const [showCard, setShowCard] = useState(true);

  // 此处放置你已编写的cards请求函数、getCardData函数、useEffect逻辑

  return (
    <div className="card-container">
      {/* 先做判空处理，无数据时展示加载提示 */}
      {card.length === 0 ? (
        <p>卡片数据加载中...</p>
      ) : (
        card.map((item, index) => (
          // 每个遍历项需要添加唯一key属性，优先使用接口返回的唯一id，无唯一id时可临时用index替代
          <div key={item.id || index} className="card-item">
            <h3>{item.title}</h3>
            <p>{item.description}</p>
            {/* 可根据接口返回的字段自行扩展渲染内容，例如下方的图片、价格字段 */}
            <img src={item.image} alt={item.title} />
            <span>售价：{item.price}</span>
          </div>
        ))
      )}
    </div>
  )
}

注意事项 #

• 状态初始值必须设置为数组，不能设为null/undefined，否则调用map方法会直接抛出异常
• 每个遍历生成的DOM节点必须加唯一key属性，可提升React渲染性能，避免列表更新时出现渲染异常
• 可增加接口请求错误兜底处理，避免接口返回异常时页面崩溃

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