React项目使用axios获取JSON数据后如何打印trips字段内容

• 属性访问路径错误：trips是和name平级的theme对象属性，而非name的子属性，你写的user.name.trips必然返回undefined
• trips本身是数组结构，无法直接渲染为JSX内容，需要对trips做二次遍历才能输出内部的地点、折扣价等字段
• React列表渲染需要为每个遍历项绑定唯一key属性避免渲染报错

import { useState, useEffect } from 'react';
import axios from 'axios';

function Card() {
  // 变量名优化更贴合数据语义，原命名users不符合接口返回内容定义
  const [themes, setThemes] = useState([]);
  const fetchThemes = async () => {
    // 新增异常捕获避免接口报错导致页面崩溃
    try {
      const response = await axios.get(process.env.REACT_APP_PRODUCT_URL);
      setThemes(response.data.themes);
    } catch (err) {
      console.error('主题数据请求失败:', err);
    }
  };

  useEffect(() => {
    fetchThemes();
  }, []);

  return (
    <div>
      {themes.map((theme) => (
        <div key={theme.id}>
          <h3>主题：{theme.name}</h3>
          <ul>
            {/* 二次遍历trips数组渲染行程内容 */}
            {theme.trips.map((trip) => (
              <li key={trip.id}>
                地点：{trip.location} | 折扣价：{trip.price_discounted}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

如果接口返回的trips字段可能为空，可使用可选链写法theme.trips?.map(...)，避免空值调用map导致的页面崩溃。

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