相关疑难解决方法(0)

有没有办法在开发模式下运行create-react-app时禁用错误覆盖？

这是我正在谈论的重叠:

我问这个是因为我在我的应用程序中使用错误边界(React 16 Error Boundaries)来显示组件崩溃时的错误消息,但错误覆盖会弹出并覆盖我的消息.

我正在学习如何使用componentDidCatch().它看起来很直接.它可以工作,但仍然在视图上显示完整的错误堆栈.

在单独的文件中:

import React, { Component } from 'react'

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false
    }
  }

  componentDidCatch(error, info) {
    console.log("Catching an error") // this is never logged
    this.setState(state => ({...state, hasError: true }))
  }

  render() {
    if (this.state.hasError) { return <div>Sorry, an error occurred</div> }

    return this.props.children
  }
}
export default ErrorBoundary

      ...

import React, { Component } from 'react'

class Foo extends Component {

  render() {
    return this.props.a.b; // …

我正在学习 React 中的错误边界。我想我已经有了很好的基本理解，但是在为异步过程（例如加载数据）实现它们时遇到了麻烦。

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

// 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 …