Javascript React组件将渲染两次

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

然而，在最近的开发中，特定的

被渲染了两次。在进行故障排除时，我看到

出现了两次，但在代码中，只编写了一次

。我在琢磨如何解决这个问题

代码如下： App.js

import React，{Fragment，Component}来自“React”；
从“react Router dom”导入{BrowserRouter as Router，Route}；
从“react bootstrap”导入{Button}；
从“/Components/carosel”导入Carasel；
从“/Components/Cards”导入卡片；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

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
);

从“React”导入React；
从“react dom”导入react dom；
从“/App”导入应用程序；
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
);
}
}
导出默认卡；

cards.js

import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Card from "./card";

class Cards extends Component {
  render() {
    return (
      <div className="container-fluid d-flex justify-content-center">
        <div className="row">
          <div className="col-md-4">
            <Card mouse="DevOps" />
          </div>
          <div className="col-md-4">
            <Card mouse="Cloud Computing" />
          </div>
          <div className="col-md-4">
            <Card mouse="Machine Learning" />
            <Card />
          </div>
        </div>
      </div>
    );
  }
}
export default Cards;

import React，{Component}来自“React”；
导入“bootstrap/dist/css/bootstrap.min.css”；
从“/Card”导入卡片；
类卡扩展组件{
render（）{
返回(
);
}
}
导出默认卡；

---

现在的问题是：

在最后渲染了两次。问题出在哪里，出在哪里。故障排除时，组件是否有状态？请建议

您似乎有一张没有鼠标的传统卡？在最后的div里？我不认为这应该在那里。

看来你有一张传统的卡片，里面没有鼠标？在最后的div里？我认为这不应该存在。

React.StrictMode

将呈现组件两次以检测某些问题（仅在开发模式下）。您能否确认，即使在没有

StrictMode

的情况下呈现组件，问题仍然存在？

会做出反应。StrictMode

将呈现组件两次以检测某些问题（仅在开发模式下）。您能否确认，即使在没有

StrictMode

的情况下渲染组件，问题仍然存在？完美。对错过了完美。对错过了

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;

import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Card from "./card";

class Cards extends Component {
  render() {
    return (
      <div className="container-fluid d-flex justify-content-center">
        <div className="row">
          <div className="col-md-4">
            <Card mouse="DevOps" />
          </div>
          <div className="col-md-4">
            <Card mouse="Cloud Computing" />
          </div>
          <div className="col-md-4">
            <Card mouse="Machine Learning" />
            <Card />
          </div>
        </div>
      </div>
    );
  }
}
export default Cards;