재렌더링 및 useEffect() 호출의 순서

Question

구성요소가 있습니다 TopPage 和 ImagePreview 和 FileUploader

1. 먼저 표시 FileUploader,

2. FileUploader는 TopPage의 fileObj 상태를 변경합니다.

3. 그러면 FileUploader가 사라지고 ImagePreview가 나타나고 동시에 useEffect()가 호출되는데 이때는 ImagePreviewRef가 없습니다.

useState가 호출되면 컴포넌트 재렌더링과 useEffect가 모두 호출됩니다.

명령은 useEffect -> re-render 인가요?

그렇다면 이 문제를 어떻게 해결할 수 있나요?

으아아아

---

임시 해결책,

지금까지는 이게 맘에 들었는데, ImagePreview 및 ImagePreview 和 FileUploader 렌더링 구성 요소는 처음부터 display:none로 전환됩니다.

조금 어색해 보이지만...지금까지는 훌륭하게 작동합니다.

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 }   
}

Answer 1

균일하게 렌더링한 다음 CSS를 사용하여 조건부로 구성 요소를 표시하여 참조를 보존합니다.

으아악