React中子组件错误如何传递给父组件实现全页错误提示

核心采用状态提升的方式，把全局错误判断逻辑统一放到父组件，子组件只负责捕获自身请求的错误并透传给父组件，完全移除子组件内部的局部错误展示逻辑。

• 父组件维护全局错误状态，接收任意子组件上报的错误后，直接替换整页渲染内容为全页错误提示
• 父组件向所有业务子组件透传统一的错误上报回调，子组件捕获请求异常时直接调用回调，不做内部错误状态处理
• 错误触发时直接卸载所有业务DOM，不保留任何局部业务内容或局部错误占位

代码改造步骤 #

1. 父组件 UsersApp.tsx 改造 #

新增全局错误状态与统一错误回调，错误触发时直接返回全屏居中的错误页，不再渲染任何业务模块：

import React, { FC, useState } from "react"
import User from "../containers/User"
import UserProjects from "../containers/UserProjects"
import ErrorState from "./ErrorState"

const UsersApp: FC = () => {
  const [hasPageError, setHasPageError] = useState(false)

  // 统一错误上报回调，透传给所有子组件
  const handleChildRequestError = () => {
    setHasPageError(true)
  }

  // 任意错误触发时，直接渲染全页错误，替换所有原有内容
  if (hasPageError) {
    return (
      <div style={{minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", padding: "0"}}>
        <ErrorState />
      </div>
    )
  }

  return (
    <>
      <div>
        <h1>Welcome!</h1>
      </div>
      <hr />
      <div>
        {/* 把错误回调作为props传入两个业务子组件 */}
        <User onRequestError={handleChildRequestError} />
        <UserProjects onRequestError={handleChildRequestError} />
      </div>
    </>
  )
}

export default UsersApp

2. 子组件 User.tsx 改造 #

移除内部的局部错误状态逻辑，接收到的错误回调作为prop传入，请求异常时直接上报给父组件：

import React, { FC, useState, useEffect } from "react"
import { getUserData } from "../requests/getUserData"

// 定义组件接收的props类型
interface UserContainerProps {
  onRequestError: () => void
}

const User: FC<UserContainerProps> = ({ onRequestError }) => {
  const [loading, setLoading] = useState(false)
  const [name, setName] = useState("")
  const [age, setAge] = useState("")
  const [country, setCountry] = useState("")

  const getData = async () => {
    setLoading(true)
    const response = await getUserData()
    return response.data
  }

  useEffect(() => {
    getData()
      .then((data) => {
        setName(data.name)
        setAge(data.age)
        setCountry(data.country)
      })
      .catch(() => {
        setLoading(false)
        // 直接调用父组件传入的错误回调，不再维护内部错误状态
        onRequestError()
      })
  }, [onRequestError])

  return (
    <div>
      <h1>{name}</h1>
      <p>{age}</p>
      <p>{country}</p>
    </div>
  )
}

export default User

3. UserProjects 组件改造 #

逻辑与User组件完全一致：接收onRequestError回调，捕获自身请求错误时直接调用上报即可。

效果说明 #

• 任意子组件请求失败时，会直接触发父组件的全局错误状态更新
• 父组件重渲染时会完全移除所有业务DOM，包括顶部的Welcome标题、分割线、两个业务组件的全部内容
• 最终页面仅保留全屏居中的大幅错误提示，其余区域完全置空，没有任何残留的业务内容或局部错误占位
• 实现过程无需引入额外的全局状态管理库，代码侵入性最低

注：useEffect的依赖数组必须包含onRequestError回调，避免闭包捕获旧的状态值导致错误上报失效。

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