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

Question

我正在尝试创建一个react网站，但它随机停止了在我的浏览器上加载。控制台显示一长串错误。其中大多数是：；tabTarget为空"；以及"；未选中lastError值：错误：发生意外错误；。

我似乎找不到类似的问题。下面是我为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();

Answer 1

您正在调用导致循环的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>
)
}

Answer 2

只需将页脚更改为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>
)
}