严重的用户界面弹出窗口发出警告

问题描述

我正在做一个React项目。因此，我使用Material UI在单击按钮时制作了一个弹出框。为了测试它，我只添加了一个文本，然后弹出一个我想要的文本。但是有一个问题，在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",}}
          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);

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

请告诉我我做错了什么。 预先感谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）