如何防止组件的重新加载

Question

How can I prevent the continuous loading of a component in react as in the following case?以下情况不断重新加载组件反应menulet如何防止这种情况？

REACT组件：

import React, { useEffect, useState } from "react";
import "antd/dist/antd.css";
import "../styles/index.css";
import MenuLat from "./MenuLat";
import Header from "./Header";
import { withRouter } from "react-router-dom";
import Charts from "./Charts";
import FirstPage from "./FirstPage";

function ChartsHome() {
  const [isHome, setHome] = useState(true);

  useEffect(() => {
    //setInterval(fetchData, 1000);
    fetchData();
  }, []);

  const fetchData = () => {
    if (localStorage.getItem("isHome") == "true") {
      setHome(true);
      console.log("sono in fetchdata true");
    } else {
      setHome(false);
      console.log("fetch data è false");
    }
  };

  const renderPlot = () => {
    if (isHome == true) {
      return (
        <div className="content">
          <FirstPage />{" "}
        </div>
      );
    } else {
      return <Charts></Charts>;
    }
  };

  return (
    <div>
      <Header />
      <div className="sidebar">
        <MenuLat fetchData={fetchData}></MenuLat>
      </div>
      {renderPlot()}
    </div>
  );
}

export default withRouter(ChartsHome);

Menulat代码：

import React from "react";
import "antd/dist/antd.css";
import "../styles/index.css";
import { DownOutlined } from "@ant-design/icons";
import { loadvaluemenu } from "../services/menu";
import { Tree } from "antd";
import { LineChartOutlined } from "@ant-design/icons";
var rankInt = [1];
var conta = 2;
const styles = {
  container: (flexValue) => {
    return {
      borderRadius: "10px 10px 10px 10px",
      border: "solid",
      borderWidth: "1px",
      margin: "4px",
      backgroundImage:
        "linear-gradient(to bottom left, #FFFFFF 30%, " + flexValue + " 160%)",
      whiteSpace: "pre",
      padding: "3px",
      boxShadow: "4px 5px 5px #EADFE3",
    };
  },
};

const valore = {
  container: (flexValue) => {
    if (flexValue < 0) {
      return "";
    } else return flexValue + "%";
  },
};

class MenuLat extends React.Component {
  state = {
    collapsed: false,
  };

  constructor(props) {
    super(props);
    this.state = {
      macchina: [],
      nomemacchina: "",
      gruppi: [],
      sottogruppi: [],
    };
  }

  async componentDidMount() {
    console.log("Sono in did mount");
    await this.loadvalue();
  }

  async loadvalue() {
    console.log("Carico valori menu");
    var backendvalues = await loadvaluemenu();
    this.setState({ macchina: backendvalues[0] });
    this.setState({
      gruppi: [...this.state.macchina.subitems],
    });
  }

  click(
    macchina1,
    gruppo1,
    dispositivo1,
    segnale1,
    nomelivello,
    nomepadre1,
    nomepadre2,
    nomepadre3
  ) {
    var args = {
      macchina: macchina1,
      gruppo: gruppo1,
      dispositivo: dispositivo1,
      segnale: segnale1,
      nomelivello: nomelivello.toString().replace("%", "").toUpperCase(),
      nomepadre1: nomepadre1.toString().replace("%", "").toUpperCase(),
      nomepadre2: nomepadre2.toString().replace("%", "").toUpperCase(),
      nomepadre3: nomepadre3.toString().replace("%", "").toUpperCase(),
    };

    localStorage.setItem(
      "NomeLivello",
      nomelivello.toString().replace("%", "").toUpperCase()
    );
    localStorage.setItem(
      "nomepadre1",
      nomepadre1.toString().replace("%", "").toUpperCase()
    );
    localStorage.setItem(
      "nomepadre2",
      nomepadre1.toString().replace("%", "").toUpperCase()
    );
    localStorage.setItem(
      "nomepadre3",
      nomepadre1.toString().replace("%", "").toUpperCase()
    );
    localStorage.setItem("macchina1", macchina1);
    localStorage.setItem("gruppo1", gruppo1);
    localStorage.setItem("dispositivo1", dispositivo1);
    localStorage.setItem("segnale1", segnale1);
    localStorage.setItem("isHome", "false");
    this.props.fetchData();
  }

  getId() {
    rankInt.push(conta);
    conta++;
    return conta;
  }

  render() {
    return (
      <div id="treeDiv">
        <Tree
          showLine={{ showLeafIcon: false }}
          showIcon
          style={{ padding: "6px" }}
          switcherIcon={<DownOutlined />}
          treeData={[
            {
              title: (
                <div style={styles.container(this.state.macchina.color)}>
                  {" "}
                  <label
                    style={{
                      fontWeight: "bold",
                      textTransform: "uppercase",
                      fontSize: "14px",
                    }}
                  >
                    <tr>
                      {this.state.macchina.name}{" "}
                      {valore.container(this.state.macchina.value)}
                      {""}
                    </tr>
                  </label>{" "}
                  <LineChartOutlined
                    onClick={() =>
                      this.click(
                        this.state.macchina.name,
                        "",
                        "",
                        "",
                        "MACHINE",
                        "",
                        "",
                        ""
                      )
                    }
                  />{" "}
                </div>
              ),
              key: this.getId(),
              children: this.state.gruppi.map((gruppi, i) => {
                return {
                  title: (
                    <div style={styles.container(gruppi.color)}>
                      {" "}
                      <label
                        style={{
                          textTransform: "capitalize",
                          fontStyle: "italic",
                          fontSize: "14px",
                        }}
                      >
                        {gruppi.name}
                        {"    "}
                        {valore.container(gruppi.value)}
                      </label>
                      <LineChartOutlined
                        onClick={() =>
                          this.click(
                            this.state.macchina.name,
                            "" + i + "",
                            "",
                            "",
                            gruppi.name,
                            "MACHINE",
                            "",
                            ""
                          )
                        }
                      />{" "}
                    </div>
                  ),
                  key: this.getId(),
                  children: gruppi.subitems.map((gruppi2, i2) => {
                    return {
                      title: (
                        <div
                          style={styles.container(gruppi.subitems[i2].color)}
                        >
                          {" "}
                          <label style={{ fontSize: "14px" }}>
                            {gruppi.subitems[i2].name}
                            {"    "}
                            {valore.container(gruppi.subitems[i2].value)}
                          </label>{" "}
                          <LineChartOutlined
                            onClick={() =>
                              this.click(
                                this.state.macchina.name,
                                "" + i + "",
                                "" + i2 + "",
                                "",
                                valore.container(gruppi.subitems[i2].name),
                                this.state.gruppi[i].name,
                                "MACHINE",
                                ""
                              )
                            }
                          />{" "}
                        </div>
                      ),
                      key: this.getId(),
                      children: gruppi.subitems[i2].subitems.map(
                        (gruppi3, i3) => {
                          return {
                            title: (
                              <div
                                style={styles.container(
                                  gruppi.subitems[i2].subitems[i3].color
                                )}
                              >
                                {" "}
                                <label style={{ fontSize: "14px" }}>
                                  {gruppi.subitems[i2].subitems[i3].name}
                                  {"   "}
                                  {valore.container(
                                    gruppi.subitems[i2].subitems[i3].value
                                  )}
                                </label>{" "}
                                <LineChartOutlined
                                  onClick={() =>
                                    this.click(
                                      this.state.macchina.name,
                                      "" + i + "",
                                      "" + i2 + "",
                                      "" + i3 + "",
                                      valore.container(
                                        gruppi.subitems[i2].subitems[i3].name
                                      ),
                                      this.state.gruppi[i].subitems[i2].name,
                                      this.state.gruppi[i].name,
                                      "MACHINE"
                                    )
                                  }
                                />{" "}
                              </div>
                            ),
                            key: this.getId(),
                          };
                        }
                      ),
                    };
                  }),
                };
              }),
            },
          ]}
        ></Tree>
      </div>
    );
  }
}

export default MenuLat;