如何解决“在StrictMode中弃用了findDOMNode"错误? [英] How can I fix ''findDOMNode is deprecated in StrictMode'' error?

问题描述

当我单击触发抽屉打开的按钮时，在控制台中出现"StrictMode中已弃用findDOMNode"

I get '' findDOMNode is deprecated in StrictMode '' in my console when I click on the button that triggers drawer to open

这是按钮组件容器，按钮组件名为Sidenav

This is the button component container , button component is named Sidenav

import Sidenav from './Sidenav';


function Header() {
    return (
        <div className="header">
                    <div>
                        <Sidenav />
                    </div>
            </div>
        </div>
    );
}

export default Header;

这是Sidenav组件

This is the Sidenav component

import React, { useState } from 'react';
import clsx from 'clsx';

import { makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import List from '@material-ui/core/List';
import MenuRoundedIcon from '@material-ui/icons/MenuRounded';

//sidenav width and styles
const useStyles = makeStyles({
    list: {
        width: 200
    },
    fullList: {
        width: 'auto'
    }
});

function Sidenav() {
    // Functionality for sidenav
    const classes = useStyles();
    const [ state, setState ] = useState({
        right: false
    });

    const toggleDrawer = (anchor, open) => (event) => {
        if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
            return;
        }

        setState({ ...state, [anchor]: open });
    };

    // Links go here
    const list = (anchor) => (
        <div
            className={clsx(classes.list, {
                [classes.fullList]: anchor === 'top' || anchor === 'bottom'
            })}
            role="presentation"
            onClick={toggleDrawer(anchor, false)}
            onKeyDown={toggleDrawer(anchor, false)}
        >
            <List>
                {/* {[ 'Inbox', 'Starred', 'Send email', 'Drafts' ].map((text, index) => (
                    <ListItem button key={text}>
                        <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
                        <ListItemText primary={text} />
                    </ListItem>
                ))} */}
            </List>
            {/* <Divider /> */}
            <List>
                {/* {[ 'All mail', 'Trash', 'Spam' ].map((text, index) => (
                    <ListItem button key={text}>
                        <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
                        <ListItemText primary={text} />
                    </ListItem>
                ))} */}
            </List>
        </div>
    );

    return (
        <div>
            <button onClick={toggleDrawer('right', true)}>
                <MenuRoundedIcon />
            </button>
            <Drawer anchor={'right'} open={state['right']} onClose={toggleDrawer('right', false)}>
                {list('right')}
            </Drawer>
        </div>
    );
}

export default Sidenav;

这是当 Sidenav 组件作为按钮被点击时的控制台错误

And this is the console error when Sidenav component is clicked as a button

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: 
    in div (created by Transition)
    in Transition (created by ForwardRef(Fade))
    in ForwardRef(Fade) (created by ForwardRef(Backdrop))
    in ForwardRef(Backdrop) (created by WithStyles(ForwardRef(Backdrop)))
    in WithStyles(ForwardRef(Backdrop)) (created by ForwardRef(Modal))
    in div (created by ForwardRef(Modal))
    in ForwardRef(Portal) (created by ForwardRef(Modal))
    in ForwardRef(Modal) (created by ForwardRef(Drawer))
    in ForwardRef(Drawer) (created by WithStyles(ForwardRef(Drawer)))
    in WithStyles(ForwardRef(Drawer)) (at Sidenav.js:69)
    in div (at Sidenav.js:65)
    in Sidenav (at Header.js:37)
    in div (at Header.js:36)
    in div (at Header.js:11)
    in div (at Header.js:10)
    in Header (at App.js:10)
    in div (at App.js:9)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

如何解决控制台错误?

推荐答案

该错误来自 material-ui 的 Transition 组件.也许他们会在将来修复它，但不用担心您不会在生产中看到此错误.即使您不需要 StrictMode ，也可以将其从 src/index.js 中删除.

The error is coming from material-ui's Transition component. Maybe they will fix it in the future but worry not you won't see this error in production. Still if you don't need the StrictMode you can remove it from src/index.js.

这篇关于如何解决“在StrictMode中弃用了findDOMNode"错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！