React报错排查：Objects are not valid as a React child及map空值问题

第一个错误：Uncaught Error: Objects are not valid as a React child (found: [object Promise]) #

这个错误的根源是你在渲染阶段直接使用了返回Promise的异步操作——比如在组件JSX里直接写{axios.get(...).then(res => ...)}，或是把带async的函数直接作为子元素。此时React尝试渲染的是Promise对象，而非合法的JSX元素，自然会触发报错。

第二个错误：Uncaught TypeError: Cannot read properties of null (reading 'map') #

你疑惑currShows在useEffect赋值后仍为null，核心原因是：
React组件渲染是同步的，初始化时currShows的初始值是null，而useEffect里的axios请求是异步操作，会在组件第一次渲染完成后才执行。也就是说，第一次渲染时currShows还是null，调用map()直接触发报错，等请求完成赋值后组件会重新渲染，但第一次渲染的错误已经发生了。

修正方案 #

1. 给状态设置安全的初始值 #

把currShows的初始值从null改成空数组[]，这样即使请求还没完成，[]调用map()也不会报错，只是渲染空内容。

2. 正确处理useEffect里的异步逻辑 #

不要把useEffect的回调函数设为async（因为async函数返回Promise，而useEffect期望回调返回清理函数或undefined），应该在useEffect内部单独定义async函数并调用。

3. 可选：添加加载/错误状态（提升体验） #

在请求过程中显示加载提示，请求失败时显示错误信息，避免用户看到空白或报错。

修正后的示例代码 #

Admin组件 #

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

const Admin = () => {
  // 初始值设为空数组，而非null
  const [currShows, setCurrShows] = useState([]);
  // 新增加载和错误状态
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 内部定义异步函数
    const fetchShows = async () => {
      try {
        const res = await axios.get('/api/shows');
        setCurrShows(res.data);
      } catch (err) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchShows();
  }, []);

  // 根据状态渲染不同内容
  if (isLoading) return <div>加载演出列表中...</div>;
  if (error) return <div>加载失败：{error}</div>;

  return (
    <div className="admin-shows">
      {currShows.map(show => (
        <ShowListing key={show.id} show={show} />
      ))}
    </div>
  );
};

export default Admin;

ShowListing组件（示意） #

const ShowListing = ({ show }) => {
  return (
    <div className="show-item">
      <h3>{show.title}</h3>
      <p>{show.description}</p>
      {/* 其他展示内容 */}
    </div>
  );
};

export default ShowListing;

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