React 组件被渲染两次

Question

我是 Reactjs 的新手，正在尝试开发静态网站。到目前为止，能够渲染像 carasouel 和卡片这样的少数组件。

然而，在最近的发展中，具体<div>的被渲染了两次。在进行故障排除时，我看到它<div>来了两次，但在代码中，只写<div>了一次。挠头如何解决这个问题。

这是代码：App.js

import 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.js

import 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

);

卡片.js

import 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 中？我不认为那应该在那里。