Javascript React-componentDidUpdate（）无法找到由render（）方法渲染的DOM对象

编辑：我编辑了代码以添加和使用引用，而不是

document.getElementById

。它没有解决问题

编辑2:所以我用

mutationObserver

做了一些测试，结果发现

componentdiddupdate（）

在节点实际插入前大约100毫秒开始执行！这绝对是问题所在

但是，React文档说，

componentDidUpdate（）

仅在

render（）

完全执行后才会触发？我是不是遗漏了什么？如果是，什么？我只想让代码在插入

render（）

中的所有节点后执行

编辑3:问题已被发现并解决。请参考我在下面发布的答案。感谢所有帮助过我的人

---

所以我正在尝试为我的网站创建一个登录对话框。我正在利用React构建对话框，并使用FirebaseUI显示内容。我的问题是，在React通过状态更改时的

render（）

方法渲染DOM节点（从

open:false

到

open:true

）之后，

componentdiddupdate（）

函数无法立即找到这些DOM节点

class SignInModal extends React.Component {

  constructor(props) {
    super(props);
    this.dialogTitle = React.createRef();
    this.firebaseContainer = React.createRef();
  }
  state = {
    open: false,
    redirect: null,
    preRedirectFunction: null,
  };

  handleClickOpen = (redirect, preRedirectFunction) => {    

    this.setState({
      open: true,
      redirect: redirect,
      preRedirectFunction: preRedirectFunction,
    });

  }

  componentDidUpdate() {
    console.log("componentDidUpdate at time: ");
    console.log(Date.now());
    console.log("Sign in modal state: ")
    console.log(this.state);

    console.log("Dialog title: ")
    console.log(this.dialogTitle.current);
    console.log("Firebase container: ")
    console.log(this.firebaseContainer.current);

    /* setTimeout(function () {
      var authUI = firebaseui.auth.AuthUI.getInstance();
    if(authUI){
      console.log("AuthUI found");
      authUI.reset();
      authUI.start('#firebaseui-auth-container', getUIConfig(authUI, SignInModalRendered.state.redirect,SignInModalRendered.state.preRedirectFunction));
    }
    else{
      console.log("No AuthUI found");
      startFirebaseUI("", SignInModalRendered.state.preRedirectFunction);
    }
    }, 200); */


  }

  handleClose = () => {
    this.setState({
      open: false,
      redirect: null,
      preRedirectFunction: null,
    });
  };

  render() {
    console.log("Rendering sign-in modal");
    console.log("Sign in modal state: ")
    console.log(this.state);

    console.log("Dialog title: ")
    console.log(this.dialogTitle.current);
    console.log("Firebase container: ")
    console.log(this.firebaseContainer.current);
    return (
      <div>
        <Dialog
          onClose={this.handleClose}
          aria-labelledby="customized-dialog-title"
          open={this.state.open}
        >
          <DialogTitle id="customized-dialog-title" ref={this.dialogTitle} onClose={this.handleClose} style={{textAlign: "center"}}>
          {Date.now()}
          </DialogTitle>
          <DialogContent id="SignInDialogContainer">
            <div id="firebaseui-auth-container" ref={this.firebaseContainer}></div>
            <div id="loader">{Date.now()}</div>
          </DialogContent>
        </Dialog>
      </div>
    );
  }
}

类SignInModel扩展了React.Component{
建造师（道具）{
超级（道具）；
this.dialogTitle=React.createRef（）；
this.firebaseContainer=React.createRef（）；
}
状态={
开：错，
重定向：null，
预重定向函数：null，
};
handleClickOpen=（重定向，预重定向函数）=>{
这是我的国家({
开放：是的，
重定向：重定向，
preRedirectFunction:preRedirectFunction，
});
}
componentDidUpdate（）{
log（“componentdiddupdateat time:”）；
console.log（Date.now（））；
日志（“登录模式状态：”）
console.log（this.state）；
日志（“对话框标题：”）
console.log（this.dialogTitle.current）；
日志（“Firebase容器：”）
log（this.firebaseContainer.current）；
/*setTimeout（函数（）{
var authUI=firebaseui.auth.authUI.getInstance（）；
if（authUI）{
console.log（“AuthUI-find”）；
reset（）；
authUI.start（'#firebaseui auth container'，getUIConfig（authUI，signnmodalrendered.state.redirect，signnmodalrendered.state.preRedirectFunction））；
}
否则{
log（“未找到AuthUI”）；
startFirebaseUI（“，SignInModalRendered.state.preRedirectFunction”）；
}
}, 200); */
}
handleClose=（）=>{
这是我的国家({
开：错，
重定向：null，
预重定向函数：null，
});
};
render（）{
console.log（“呈现登录模式”）；
日志（“登录模式状态：”）
console.log（this.state）；
日志（“对话框标题：”）
console.log（this.dialogTitle.current）；
日志（“Firebase容器：”）
log（this.firebaseContainer.current）；
返回(
{Date.now（）}
{Date.now（）}
);
}
}

执行此代码时，代码在

authUI.start（“#firebaseui auth container”…

行失败，因为它找不到DOM节点

对于编辑的代码，我只是试图获取

componentdiddupdate（）

中的控制台日志，以便能够找到对话框标题和Firebase容器DOM节点。它们仍然返回

null

但是，DOM中的

Date.now（）

函数和

componentdiddupdate（）

函数（如上图所示）的输出显示，

componentdiddupdate（）

中的代码是在呈现DOM后2毫秒执行的。那么为什么

componentdiddupdate（）中的代码行是

找不到它吗

我发现

componentdiddupdate（）

在节点渲染完成前大约100毫秒执行。为什么会这样？在节点渲染完成后如何让代码执行

---

其他信息：我尝试将有问题的代码块以200毫秒的延迟放入

setTimeout

函数中，它运行得非常好。但我不想使用此解决方法，我想了解发生了什么。

在构造函数中创建引用。例如：

this.refName=React.createRef（）；

将ref指定为组件中的道具

使用

this.refName.current

class SignInModal extends React.Component {

  constructor (props) {
    super(props);
    this.customizedDialogTitle = React.createRef();
    this.signInDialogContainer = React.createRef();
    this.firebaseuiAuthContainer = React.createRef();
    this.loader = React.createRef();
    this.state = {
      open: false,
      redirect: null,
      preRedirectFunction: null,
    }
  }

  handleClickOpen = (redirect, preRedirectFunction) => {

    this.setState({
      open: true,
      redirect: redirect,
      preRedirectFunction: preRedirectFunction,
    });

  }

  componentDidUpdate() {
    console.log("componentDidUpdate at time: ");
    console.log(Date.now());
    console.log("Sign in modal state: ")
    console.log(this.state);

    console.log("Dialog title: ")
    console.log(this.customizedDialogTitle.current);
    console.log("Firebase container: ")
    console.log(this.firebaseuiAuthContainer.current);

    var authUI = firebaseui.auth.AuthUI.getInstance();
    if(authUI){
      console.log("AuthUI found");
      authUI.reset();
      authUI.start('#firebaseuiAuthContainer', getUIConfig(authUI, this.state.redirect,this.state.preRedirectFunction));
    }
    else{
      console.log("No AuthUI found");
      startFirebaseUI("", this.state.preRedirectFunction);
    }
  }

  handleClose = () => {
    this.setState({
      open: false,
      redirect: null,
      preRedirectFunction: null,
    });
  };

  render() {
    console.log("Rendering sign-in modal");
    console.log("Sign in modal state: ")
    console.log(this.state);

    console.log("Dialog title: ")
    console.log(this.customizedDialogTitle.current);
    console.log("Firebase container: ")
    console.log(this.firebaseuiAuthContainer.current);
    return (
      <div>
        <Dialog
          onClose={this.handleClose}
          aria-labelledby="customized-dialog-title"
          open={this.state.open}
        >
          <DialogTitle ref={this.customizedDialogTitle} id="customized-dialog-title" onClose={this.handleClose} style={{textAlign: "center"}}>
          {Date.now()}
          </DialogTitle>
          <DialogContent ref={this.signInDialogContainer}>
            <div ref={this.firebaseuiAuthContainer}></div>
            <div ref={this.loader}>{Date.now()}</div>
          </DialogContent>
        </Dialog>
      </div>
    );
  }
}

类SignInModel扩展了React.Component{
建造师（道具）{
超级（道具）；
this.customizedDialogTitle=React.createRef（）；
this.signInDialogContainer=React.createRef（）；
this.firebaseuiAuthContainer=React.createRef（）；
this.loader=React.createRef（）；
此.state={
开：错，
重定向：null，
预重定向函数：null，
}
}
handleClickOpen=（重定向，预重定向函数）=>{
这是我的国家({
开放：是的，
重定向：重定向，
preRedirectFunction:preRedirectFunction，
});
}
componentDidUpdate（）{
log（“componentdiddupdateat time:”）；
console.log（Date.now（））；
日志（“登录模式状态：”）
console.log（this.state）；
日志（“对话框标题：”）
log（this.customizedDialogTitle.current）；
日志（“Firebase容器：”）
log（this.firebaseuauthcontainer.current）；
var authUI=firebaseui.auth.authUI.getInstance（）；
if（authUI）{
console.log（“AuthUI-find”）；
reset（）；
authUI.start（'#firebaseuauthcontainer'，getUIConfig（authUI，this.state.redirect，this.state.preRedirectFunction））；
}
否则{
log（“未找到AuthUI”）；
startFirebaseUI（“，this.state.preRedirectFunction”）；
}
}
handleC
class FirebaseContainer extends React.Component {

  constructor(props){ 
    super(props);
    console.log("Passed props: ");
    console.log(props);
    this.firebaseContainer = React.createRef();    
  }

  state = this.props.parentState;  

componentDidMount() {
  console.log("componentDidMount at time: ");
  console.log(Date.now());
  /* console.log("Sign in modal state: ")
  console.log(this.state); */

  console.log("Firebase container: ")
  console.log(this.firebaseContainer.current);

  var authUI = firebaseui.auth.AuthUI.getInstance();
  if(authUI){
    console.log("AuthUI found");
    authUI.reset();
    authUI.start('#firebaseui-auth-container', getUIConfig(authUI, this.state.redirect,this.state.preRedirectFunction));
  }
  else{
    console.log("No AuthUI found");
    startFirebaseUI("", this.state.preRedirectFunction);
  } 
}

  render(){
    console.log("Rendering Firebase container");
    console.log("Firebase container state: ")
    console.log(this.state);

    console.log("Dialog title: ")
    console.log(document.getElementById('customized-dialog-title'));
    console.log("Firebase container: ")
    console.log(document.getElementById('firebaseui-auth-container'));
    return(
      <div id="firebaseui-auth-container" ref={this.firebaseContainer}></div>
    );
  }
}

class SignInModal extends React.Component {

  constructor(props) {
    super(props);
    this.dialogTitle = React.createRef();
  }
  state = {
    open: false,
    redirect: null,
    preRedirectFunction: null,
  };

  handleClickOpen = (redirect, preRedirectFunction) => {    

    this.setState({
      open: true,
      redirect: redirect,
      preRedirectFunction: preRedirectFunction,
    });

  }

  handleClose = () => {
    this.setState({
      open: false,
      redirect: null,
      preRedirectFunction: null,
    });
  };

  render() {
    console.log("Rendering sign-in modal");
    console.log("Sign in modal state: ")
    console.log(this.state);
    return (
        <Dialog ref={this.dialogTitle}
          onClose={this.handleClose}
          aria-labelledby="customized-dialog-title"
          open={this.state.open}
        >
          <DialogTitle id="customized-dialog-title" onClose={this.handleClose} style={{textAlign: "center"}}>
            Please sign in
          </DialogTitle>
          <DialogContent id="SignInDialogContainer">
            <FirebaseContainer parentState={this.state}/>
            <div id="loader">{Date.now()}</div>
          </DialogContent>
        </Dialog>
    );
  }
}