如何防止setState方法中的“警告：StrictMode中不建议使用findDOMNode”

编程问答 2022-08-23

问题描述

这是我的代码：

import Card  from 'react-bootstrap/Card';
import Collapse from 'react-bootstrap/Collapse';
import React from 'react';
import MuteButton from './buttons/muteButton/MuteButton';
import PInPButton from "./buttons/pInPButton/PInPButton";
import Utility from '../../Utility';
import './MediaPlayer.css'
class MediaPlayer extends React.Component {
    
    constructor(props) {
        super(props);
        this.playerOverlay =React.createRef();
        this.videoTag = React.createRef();
        this.state={ muted:true,elapseTime:"00:00:00",showControlBar:true};
        this.setCurrentTime=((currentTime)=>{
            this.videoTag.current.currentTime=currentTime;
        });
        this.setStream=((stream)=>{
            this.videoTag.srcObject=null;
            this.videoTag.srcObject=stream;
        });
       
    }
    toggleControlBar=(obj)=>{
            
    };
    toggleMute = () => {
        this.setState({
          muted: !this.state.muted
        });
    };
    togglePInP=(()=>{

    })    
    componentDidMount(){
        this.videoTag.ontimeupdate=(()=>{
            var result=Utility.toHHMMSS(this.videoTag.currentTime);
            this.setState({"elapseTime":result});
        });
        
        this.playerOverlay.onclick=((event)=>{
            if (event.target.classList.contains("playerOverlay")){
                this.setState((state) => ({
                    showControlBar: !state.showControlBar
                }));
                //this.setState({showControlBar:!this.state.showControlBar});
            }
        });        
    }
    
    render() {
        return (
            <Card className="h-100 rounded">
                <video 
                    autoplay 
                    muted={this.state.muted}
                    className="card-body p-0 rounded w-100"
                    ref={(instance) => (this.videoTag = instance)}>
                        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"></source>
                </video>
                <div 
                    className="align-items-center 
                        justify-content-center 
                        playerOverlay
                        text-white"
                        >
               </div>
                <div className="p-1 
                                justify-content-end 
                                playerOverlay
                                rounded"
                    ref={(instance) => (this.playerOverlay = instance)}>
                  <Collapse in={this.state.showControlBar} 
                    className="bg-secondary p-1 rounded text-white w-100 ">
                    <div className="p-0 m-0">
                        <div className="align-items-center d-flex flex-row justify-content-between p-0">
                            <MuteButton toggleMute={this.toggleMute}  muted={this.state.muted}/>
                            <div><span>{this.state.elapseTime}</span></div>
                        </div>
                        <div className="align-items-center d-flex flex-row justify-content-between p-0">
                            <PInPButton togglePInP={this.togglePInP}/>
                        </div>
                    </div>
                  </Collapse>
                </div>    
            </Card>     
        );
    }    
}
export default MediaPlayer;

问题在于，当执行以下事件处理程序时，

this.playerOverlay.onclick=((event)=>{
        if (event.target.classList.contains("playerOverlay")){
            this.setState((state) => ({
                showControlBar: !state.showControlBar
            }));
            //this.setState({showControlBar:!this.state.showControlBar});
        }
    });

控制台中显示以下警告消息：

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode.

我发现“ this.setState”函数导致了错误。

我试图修改以上代码以删除警告，但是，它不起作用。

我遵循here来更改以下代码：

ref={(instance) => (this.playerOverlay = instance)}>

到

 ref={this.playerOverlay}>

但是，仍然没有运气。

如何解决该问题？

解决方法

findDOMNode在StrictMode中已弃用。不鼓励使用它，并且有可能在以后的版本中将其删除。尽管如此，仍有其他方法可以克服这一问题。

当然，我们不应该删除StrictMode，因为它可能会带来其他潜在的问题。

  1. 添加DOM节点包装器
...
componentDidMount() {
      const node = this.wrapper.current;
      /* Uses DOM node  */ 
}
wrapper = React.createRef();

render(){
 ...
  <div ref={this.wrapper}>
     ...
  </div>
 ...
}
  1. Ref forwading

将子组件包装在React.forwardRef(props,ref)

中 
const ChildComponent = React.forwardRef((props,ref) =>
  <div ref={ref}>
    ...
  </div>
);
  1. 使用HOC（高阶组件）

这里有几篇文章可能对此有用。

https://medium.com/trabe/getting-rid-of-finddomnode-method-in-your-react-application-a0d7093b2660

https://medium.com/trabe/a-better-way-of-using-refs-in-react-dd970d2b13e5

,

根据Pramod，您只需要创建一个新的子组件，并通过react.forwardRef 传递相应的props 和refs：

const ChildComponent = React.forwardRef((props,ref) =>
  <div ref={ref}>
    <yourChildcomponent {...props} />
  </div>

在您的渲染中，为新的孩子更改原始孩子的名称：

<ChildCompoent... />
reactjsreactjsreactjsreactjssetstatesetstate