Séquence de rendu et d'appels useEffect()

Question

J'ai des composants TopPage 和 ImagePreview 和 FileUploader

1. Afficher en premier FileUploader,

2. FileUploader modifie l'état fileObj de TopPage.

3. Ensuite, FileUploader disparaît, ImagePreview apparaît et useEffect() est appelé en même temps, mais il n'y a pas de ImagePreviewRef pour le moment.

Lorsque useState est appelé, le rendu du composant et useEffect seront appelés.

La commande est useEffect -> re-render ?

Si oui, comment puis-je résoudre ce problème ?

const TopPage = (props) =>{
    const [fileObj, setFileObj ] = useState();
    const imagePreviewRef = useRef();
    useEffect(() =>{
        console.log("useEffect() is called with fileObj:",fileObj);
        console.log("imagePrevireRef.current is ready?",imagePreviewRef.current);
        imagePreviewRef.current.loadPic(fileObj);
    },[fileObj]);

    if (fileObj){
      return <ImagePreview ref={imagePreviewRef}></ImagePreview>
    }
    else {
      return <FileUploader SetFileObj=setFileObj></FileUploader>
    }
}

const FileUploader = (props) => {
   // props.setFileObj() is called here.
}
const ImagePreview = (props) => {
   const loadPic = () =>{// loadpicture to canvas }   
}

---

Solution temporaire,

J'aime ça jusqu'à présent, Rendu de ImagePreview et ImagePreview 和 FileUploader Les composants sont basculés via display:none dès le début.

Cela semble un peu gênant... mais fonctionne très bien jusqu'à présent.

const TopPage = (props) =>{
    const [fileObj, setFileObj ] = useState();
    const imagePreviewRef = useRef();
    useEffect(() =>{
        console.log("useEffect() is called with fileObj:",fileObj);
        console.log("imagePrevireRef.current is ready?",imagePreviewRef.current);
        imagePreviewRef.current.loadPic(fileObj);
    },[fileObj]);

    if (fileObj){
      return 
<React.Fragment>
<div style={{display:"block"}}>
<ImagePreview ref={imagePreviewRef}></ImagePreview>
</div>
<div style={{display:"none"}}>
<FileUploader SetFileObj=setFileObj></FileUploader>
</div>
</React.Fragment>
    }
    else {
      return 
<React.Fragment>
<div style={{display:"none"}}>
<FileUploader SetFileObj=setFileObj></FileUploader>
</div>
<div style={{display:"block"}}>
<ImagePreview ref={imagePreviewRef}></ImagePreview>
</div>
</React.Fragment>
    }
}

const FileUploader = (props) => {
   // props.setFileObj() is called here.
}
const ImagePreview = (props) => {
   const loadPic = () =>{// loadpicture to canvas }   
}

Answer 1

Rendez uniformément, puis utilisez CSS pour afficher de manière conditionnelle les composants afin de préserver les références.

const TopPage = (props) =>{
    const [fileObj, setFileObj ] = useState();
    const imagePreviewRef = useRef();
    useEffect(() =>{
       if(imagePreviewRef.current)
        imagePreviewRef.current.loadPic(fileObj);
    },[fileObj]);

    return (
      <> 
       

          
       
        {fileObj &&  }
      
    )
}