javascript - React 中的错误边界 : why does 'throw new Error(' some message' )' fail and ' throw errorObj' work?

Question

我正在学习 React 中的错误边界。我认为我已经有了很好的基本理解，但在异步进程(例如加载数据)中实现它们时遇到了困难。

假设我有一个简单的组件，它使用 React hooks 从远程 API 加载一些数据。由于错误边界本身无法使用异步进程，因此该组件不会在 catch 中抛出错误，而是将 error 存储在 state 中，并且在下次重新渲染时抛出它

// MovieDb.js
import axios from "axios"
import {useEffect,useState} from 'react'

export default (query) => {

  const [movies, setMovies] = useState([])
  const [error,setError] = useState(null)

  if (error) throw error

  useEffect(() => {
    const getData = async () => {
      try {
        const results = await axios.get('https://api.themoviedb.org/3/search/movie', {
          params: {
            api_key: 'somethingsomething',
            query
          }
        })
        setMovies(results.data.results)
      } catch (e) {
       setError(e)
      }
    }
    getData()
  }, [query])

  return movies

}

该组件在我的应用程序中使用:

// App.js
  function App() {

  const [query, setQuery] = useState('Lord of the Rings')

  const movies = MovieDb(query)
  return (
    <div className="App">
      <SearchInput onChange={e => setQuery(e.target.value)} defaultValue={query}/>
      {movies && movies.map(movie=> <div key={movie.id}>{movie.title}</div>) }
    </div>
  );
}

export default App;

我的错误边界非常简单:

//Catch.js
import React, { Component } from 'react'

export default class Catch extends Component {
  state = { hasError: false ,error:''}

  static getDerivedStateFromError(error) {
    return { hasError: true,error }
  }

  render() {
    if (this.state.hasError) {

      return <h1>{`There was a problem: ${this.state.error.message}`}</h1>
    }

    return this.props.children
  }
}

这个Catch组件然后包装应用程序:

// index.js
ReactDOM.render(<Catch><App/></Catch>, document.getElementById('root'));

当我在 MovieDb 中抛出错误时(例如调用 API 时)，错误边界似乎起作用。然而，当我改变时

 if (error) throw error

到

 if (error) throw new Error('some message')

或

 if (error) throw new Error(error.message)

错误边界不起作用，应用程序崩溃。为什么是这样？我这样问是为了更好地理解我在做什么，而不仅仅是为了让它发挥作用。感谢您的帮助!

Answer 1

这是开发环境的一个工件。您可以通过点击“escape”或“X”来关闭堆栈跟踪来查看实际的 UI。这不会出现在生产中。我相信 react 开发代码会查看抛出异常的位置，如果它在您的代码中，那么您会看到 UI。

参见:React still showing errors after catching with ErrorBoundary