用钩子进行反应重写类会导致重新渲染循环

Question

我正在研究图像过渡React组件，该组件等待加载img1，然后在用户单击时加载img2，但使img1平滑淡出。

试图用钩子重写应用程序以设置状态-但是应用此方法时，会创建一个重新渲染循环错误。

是因为我们一开始总是将img1设置为currentImgSrc吗？

const [imgSrcOne, setImgSrcOne] = useState(currentImgSrc)

if / else块中的错误？或在返回值中设置useState导致错误

试图删除if / else块以使应用程序正常运行

https://jsfiddle.net/b531L6ho/

import {
  ImageTransition
} from './imageTransition/imageTranition'


const {
  useState
} = React

interface ImageContainerProps {
  layer: string
  currentImgSrc: string
  notifyOnError: (url: string) => void
  updateLayerLoading: (hasLoaded: boolean) = void
}

export const ImageTransitionContainer: React.SFC < ImageContainerProps > = ({
  currentImgSrc,
  layer,
  notifyOnError,
  updateLayerLoading
}) => {


  const [imgSrcOne, setImgSrcOne] = useState(currentImgSrc)
  const [displayImgOne, setdisplayImgOne] = useState(true)
  const [imgOneLoaded, setImgOneLoaded] = useState(false)

  const [imgSrcTwo, setImgSrcTwo] = useState(currentImgSrc)
  const [displayImgTwo, setdisplayImgTwo] = useState(true)
  const [imgTwoLoaded, setImgTwoLoaded] = useState(false)


  if (imgSrcOne && currentImgSrc !== imgSrcOne) {
    console.log("in the if statement")
    setImgSrcTwo(currentImgSrc)
    setDisplayImgTwo(two)
  }

  if (currentImgSrc !== imgSrcOne) {
    setImgSrcne(currentImgSrc)
  }


  if (!imgSrcOne && !imgSrcTwo) {
    setImgSrcOne(currentImgSrc)
    setDisplayImgOne(true)
  } else if (imgSrcOne && currentImgSrc !== imgSrcOne) {
    setImgSrcTwo(currentImgSrc)
    setDisplayImgTwo(true)
  } else if (imgSrcTwo && currentImgSrc !== imgSrcTwo) {
    setImgSrcOne(currentImgSrc)
    setDisplayImgOne(true)
  }

  console.log("state --", imgSrcOne, displayImgOne, imgOneLoaded, imgSrcTwo, displayImgTwo, imgTwoLoaded)


  return ( 
    <>

      <ImageTransition
        displayImg={displayImgOne}
        imgLoaded={imgOneLoaded}
        imgSrc={imgSrcOne}
        onExit={() => {
          setImgSrcOne(null)
          setImgOneLoaded(false)
        }}
        onLoad={() => {
          setImgOneLoaded(true)
          setDisplayImgTwo(false)
        }}
      />

      <ImageTransition
        displayImg={displayImgTwo}
        imgLoaded={imgTwoLoaded}
        imgSrc={imgSrcTwo}
        onExit={() => {
          setImgSrcTwo(null)
          setImgTwoLoaded(false)
        }}
        onLoad={() => {
          setImgTwoLoaded(true)
          setDisplayImgOne(false)
        }}
      />

    </>
  )


}