Javascript 物料界面弹出警告

我正在做一个项目。所以我使用MaterialUI在点击一个按钮时制作了一个popover表单。为了测试它，我只添加了一个文本，它弹出了一个我想要的文本。但有一个问题，在Firefox的控制台中，我收到了一个令人讨厌的警告：

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: http**react-strict-mode-find-node
in div (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (created by Transition)
in Transition (created by ForwardRef(Grow))
in ForwardRef(Grow) (created by Unstable_TrapFocus)
in Unstable_TrapFocus (created by ForwardRef(Modal))
in div (created by ForwardRef(Modal))
in ForwardRef(Portal) (created by ForwardRef(Modal))
in ForwardRef(Modal) (created by ForwardRef(Popover))
in ForwardRef(Popover) (created by WithStyles(ForwardRef(Popover)))
in WithStyles(ForwardRef(Popover)) (at Home.js:41)
in div (at Home.js:33)
in Home (created by ConnectFunction)
in ConnectFunction (at ProtectedRoute.js:6)
in ProtectedRoute (at Routing.js:24)
in Switch (at Routing.js:23)
in Routes (created by ConnectFunction)
in ConnectFunction (at App.js:10)
in div (at App.js:9)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:8)
in App (at src/index.js:12)
in StrictMode (at src/index.js:11)
in Provider (at src/index.js:10)

我的弹出窗口组件如下所示：

import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchAndSetMyStatus } from "../../../Redux/Actions/actionStatus";
import Popover from "@material-ui/core/Popover";
import Styles from "./Home.module.css";
import Sidebar from "./ThoughtsSidebar/Sidebar";

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      popAddStatus: false,
    };

    this.id = this.state.popAddStatus ? "simple-popover" : undefined;
  }
  componentDidMount = () => {
    this.props.fetchAndSetMyStatus();
  };

  setPopAddStatus = () => {
    this.setState({ popAddStatus: true });
    console.log("Yup");
  };
  setCloseAddStatus = () => {
    this.setState({ popAddStatus: false });
  };

  render() {
    const { allMyStatus, myStatusLoading } = this.props;

    return (
      <div className={Styles.homeContainer}>
        <div className={Styles.sidebar}>
          <Sidebar
            isLoading={myStatusLoading}
            myStatus={allMyStatus}
            setPopAddStatus={this.setPopAddStatus}
          />
        </div>
        <Popover
          id={this.id}
          open={this.state.popAddStatus}
          anchorReference="anchorPosition"
          anchorPosition={{ top: 600, left: 600 }}
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "left",
          }}
          transformOrigin={{
            vertical: "top",
            horizontal: "left",
          }}
          onClose={this.setCloseAddStatus}
        >
          The Content Of Popover
        </Popover>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  allMyStatus: state.status.allMyStatus,
  myStatusLoading: state.status.myStatusLoading,
});
const mapDispatchToProps = (dispatch) => ({
  fetchAndSetMyStatus: () => dispatch(fetchAndSetMyStatus()),
});

export default connect(mapStateToProps, mapDispatchToProps)(Home);

import React，{Component}来自“React”；
从“react redux”导入{connect}；
从“../../../Redux/Actions/Actions status”导入{fetchAndSetMyStatus}”；
从“@material ui/core/Popover”导入Popover；
从“/Home.module.css”导入样式；
从“/ThoughtsSidebar/Sidebar”导入侧栏；
类Home扩展组件{
建造师（道具）{
超级（道具）；
此.state={
popAddStatus:false，
};
this.id=this.state.popAddStatus？“简单popover”：未定义；
}
componentDidMount=（）=>{
this.props.fetchAndSetMyStatus（）；
};
setPopAddStatus=（）=>{
this.setState（{popAddStatus:true}）；
控制台日志（“Yup”）；
};
setCloseAddStatus=（）=>{
this.setState（{popAddStatus:false}）；
};
render（）{
const{allMyStatus，mystatusload}=this.props；
返回(
Popover的内容
);
}
}
常量mapStateToProps=（状态）=>({
allMyStatus:state.status.allMyStatus，
myStatusLoading:state.status.myStatusLoading，
});
const mapDispatchToProps=（调度）=>({
fetchAndSetMyStatus:（）=>dispatch（fetchAndSetMyStatus（）），
});
导出默认连接（mapStateToProps、mapDispatchToProps）（主页）；

我的应用程序正在严格模式下运行

如果我做错了什么，请告诉我。

---

提前感谢

v4材质界面不完全支持StrictMode。v5（至少还有几个月）将完全支持StrictMode。