React 组件被渲染两次

Question

我是 Reactjs 的新手，正在尝试开发静态网站。到目前为止，能够渲染像 carasouel 和卡片这样的少数组件。然而，在最近的发展中，具体<div>的被渲染了两次。在进行故障排除时，我看到它<div>来了两次，但在代码中，只写<div>了一次。挠头如何解决这个问题。这是代码：App.jsimport React, { Fragment, Component } from "react";import { BrowserRouter as Router, Route } from "react-router-dom";import { Button } from "react-bootstrap";import Carasel from "./Components/carosel";import Cards from "./Components/cards";class App extends Component {  render() {    return (      <Router>        <Carasel />        <Cards />      </Router>    );  }}export default App;index.jsimport React from "react";import ReactDOM from "react-dom";import App from "./App";const rootElement = document.getElementById("root");ReactDOM.render(  <React.StrictMode>    <App />  </React.StrictMode>,  rootElement);卡片.jsimport React, { Component } from "react";import img1 from "../test/person1.jpg";import "bootstrap/dist/css/bootstrap.min.css";import { Button } from "react-bootstrap";import "./card-style.css";class Card extends Component {  render() {    const mouse = this.props.mouse;    return (      <div className="card text-center">        <div className="overflow">          <img src={img1} alt="image1" />        </div>        <div className="card-body text-dark" />        <h4 className="card-title">{mouse}</h4>        <p className="card-text text-secondary">lorem20</p>        <a href="#" className="btn btn-outline-success">          Go Anywhere        </a>      </div>    );  }}export default Card;现在的问题是：<div className="card text-center">最后被渲染了两次。没有得到问题所在。在进行故障排除时，组件似乎是有状态的？请建议

Answer 1

似乎您在卡片中有一张没有鼠标的附加卡片？在最后的 div 中？我不认为那应该在那里。