React 应用程序不会停止加载充满错误的浏览器控制台

问题描述

我正在尝试制作一个 React 网站，但它在我的浏览器上随机停止加载。控制台显示一长串错误。其中大部分是：“tabTarget is null”和“Unchecked lastError value: Error: Unexpected error发生”。

我似乎找不到类似的问题。下面是我的 App.js、Footer.js 和 Index.js 代码。

App.js

import React from 'react';
import { browserRouter as Router,Link } from 'react-router-dom';
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
//import NavbarBrand from 'react-bootstrap/NavbarBrand';
import './App.css';

import Footer from './components/Footer';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      title: 'My name',headerLInks: [
        {title: 'Home',path: '/'},{title: 'About',path: '/about'},{title: 'Contact',path: '/contact'},],home: {
        title: 'Be Relentless',subTitle: 'Projects that make a difference',text: 'Checkout my projects below'
      },about: {
        title: 'About me'
      },contact: {
        title: 'Let\'s talk'
      }
    }
  }

  render() {
    return (
      <Router>
        <Container className='p-0' fluid={true}>

          <Navbar className='border-bottom' bg="transparent" expand="lg">
            <Navbar.Brand>My Name</Navbar.Brand>

            <Navbar.Toggle className="border-0" aria-controls="navbar-toggle" />
            <Navbar.Collapse id="navbar-toggle">
              <Nav className="ml-auto">
                <Link className="nav-link" to="/">Home</Link>
                <Link className="nav-link" to="/about">About</Link>
                <Link className="nav-link" to="/contact">Contact</Link>
              </Nav>
            </Navbar.Collapse>
          </Navbar>

          <Footer />

        </Container>
      </Router>
    )
  }
}

export default App;

Footer.js

import React from 'react';
import Container from 'react-bootstrap/esm/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

function Footer() {
    return (
        <Footer className="mt-5">
            <Container fluid={true}>
                <Row classNam="border-top justify-content-between p-3">
                    <Col className="p-0" md={3} sm={12}>
                        My name
                    </Col>
                </Row>
            </Container>
        </Footer>
    )
}

export default Footer;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import 'bootstrap/dist/css/bootstrap.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,document.getElementById('root')
);

reportWebVitals();

解决方法

只需将页脚更改为 html 或其他标签，例如：

import React from 'react';
import Container from 'react-bootstrap/esm/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

function Footer() {
    return (
        <footer className="mt-5">
            <Container fluid={true}>
                <Row classNam="border-top justify-content-between p-3">
                    <Col className="p-0" md={3} sm={12}>
                        My name
                    </Col>
                </Row>
            </Container>
        </footer>
    )
}

,

您正在调用自身内部的页脚函数，这会导致循环。将页脚功能更改为以下内容：

    function Footer() {
    return (
            <Container fluid={true}>
                <Row classNam="border-top justify-content-between p-3">
                    <Col className="p-0" md={3} sm={12}>
                        My name
                    </Col>
                </Row>
            </Container>
    )
}