React应用渲染报错及修改后空值问题求助

问题梳理 #

运行React应用时遇到两个连续错误：

1. 初始代码报错：Uncaught Error: Objects are not valid as a React child (found: object with keys {category, chart, date, source})
2. 尝试用map遍历修改后，新报错：Uncaught TypeError: chartData is null

错误原因分析 #

第一个错误原因 #

• 后端server.js仅返回category字段，且该字段是对象类型（来自answer.data.info），但React无法直接渲染对象作为子元素，仅支持字符串、数字等原始类型或React组件。
• 前端app.jsx尝试渲染chart、date、source字段，但后端未返回这些数据，属于无效属性读取。

第二个错误原因 #

• chartData初始状态为null，直接调用map会触发类型错误；且后端返回的是单个对象而非数组，map仅适用于数组遍历。

修正方案 #

1. 修正后端server.js #

从API响应中提取所需字段，确保返回结构匹配前端需求，且字段为可直接渲染的类型：

const express = require("express");
const axios = require("axios");
const cors = require("cors");
require("dotenv").config();

const PORT = 8080;

const app = express();
app.use(cors());

app.get("/", (request, response) => {
    response.json("Its working!!!");
});

app.get("/charts", async (request, response) => {
  const chart_api = {
    method: 'GET',
    url: 'https://billboard-api2.p.rapidapi.com/billboard-global-200',
    params: {
       date: '2020-09-26',
       range: '1-10'
    },
    headers: {
      'X-RapidAPI-Key': 'xxx',
      'X-RapidAPI-Host': 'billboard-api2.p.rapidapi.com'
    }
  };

  try {
    const answer = await axios(chart_api);
    // 从API响应的info对象中提取具体字段
    const { category, chart, date, source } = answer.data.info;
    const chartData = { category, chart, date, source };
    response.json(chartData);
  } catch (err) {
    response.status(500).json({ error: err.message });
  }
})

app.listen(PORT, () => console.log(`App is running PORT ${PORT}`));

2. 修正前端app.jsx #

• 处理初始null状态，避免渲染错误
• 若字段仍为对象，需提取内部属性后再渲染（可根据实际API返回结构调整）

import { useState, useEffect } from 'react';
import axios from 'axios';
import './App.css';

function App() {
  const [chartData, setChartData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get('http://localhost:8080/charts');
        setChartData(response.data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }

    fetchData();
  }, []);

  // 加载状态处理
  if (!chartData) return <div>加载中...</div>;

  // 若category为对象，可转为JSON显示或提取具体属性
  return (
    <div>
      <h1>Category: {typeof chartData.category === 'object' ? JSON.stringify(chartData.category) : chartData.category}</h1>
      <h1>Chart: {chartData.chart}</h1>
      <h1>Date: {chartData.date}</h1>
      <h1>Source: {chartData.source}</h1>
    </div>
  );
}

export default App;

额外说明 #

如果需要渲染榜单歌曲这类列表数据，需从API响应中提取数组类型字段（比如answer.data.songs），后端返回数组后，前端再用map遍历：

// 假设后端返回的chartData包含songs数组
return (
  <div>
    <h1>榜单信息</h1>
    {chartData.songs.map((song, index) => (
      <div key={index}>
        <p>排名：{song.rank}</p>
        <p>歌曲：{song.title}</p>
        <p>歌手：{song.artist}</p>
      </div>
    ))}
  </div>
);

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