时间戳

首页 > 解决方案 > 将 catch 错误状态从子级发送到父级并显示消息

reactjs - 将 catch 错误状态从子级发送到父级并显示消息

问题描述

我有一个包含 2 个不同容器的页面，每个容器都发出数据请求，但如果失败，我想用页面中间的大错误消息替换所有页面，全部为空白

如果用户发现任何错误，应该使一切都失败，而不仅仅是显示消息在哪里，而是替换所有 UserApps 代码，用户和 UserProjects 将被替换为中间有错误消息的大空白页

（这只是一个例子）：

父组件 - UsersApp.tsx

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

const UsersApp: FC = () => {
  return (
    <>
      <div>
        <h1>Welcome!</h1>
      </div>
      <hr />
      <div>
  {/* //this error must be from child <User/> catch error component */}
  {error ? ( 
          <ErrorState />
        ) : (
            <User />
            <UserProjects />
        )}
      </div>
    </>
  )
}

export default UsersApp

子组件 - User.tsx

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

const User: FC<{}> = () => {
  const [error, setError] = useState(false)

  const [loading, setLoading] = useState(false)
  const [name, setName] = useState("")
  const [age, setAge] = useState("")
  const [country, setCountry] = useState("")

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

  useEffect(() => {
    getData()
      .then((data) => {
        setName(data.name)
        setAge(data.age)
        setCountry(data.country)
      })
      .catch((error) => {
        setLoading(false)
        setError(true)
      })
    return
  }, [])

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

export default User

错误状态.tsx

import React, { FC } from 'react'

const ErrorState: FC = (props) => (
  <div>
    <h1>Something went wrong!!!!! </h1>
  </div>
)

export default ErrorState

标签： reactjstypescriptreact-hooks

解决方案

你的父母需要保持错误状态。将 setError 作为道具传递给孩子

const UsersApp = () => {
  const [error, setError] = useState(false)
  return (
    <>
      <div>
        <h1>Welcome!</h1>
      </div>
      <hr />
      <div>
        {error && <ErrorState/>}
        {!error && (
            <User setError={setError} />
            <UserProjects setError={setError} />
        )}
      </div>
    </>
  )
}

const User = ({ setError }) => {
  //remove set error state from child
}

const UserProjects = ({ setError }) => {
  //remove set error state from child
}

推荐阅读