Реактивный класс перезаписи с перехватчиками вызывает повторные рендеринг циклов - PullRequest
Новая
       2

Реактивный класс перезаписи с перехватчиками вызывает повторные рендеринг циклов

1 голос
/ 09 мая 2019

Я работаю над компонентом реакции на переход изображения, где он ожидает загрузки img1, а затем щелкает пользователем, загружает img2, но плавно затухает img1.

Попытка переписать приложение с перехватчиками для установки состояний - но когда это применяется, возникает ошибка цикла повторного рендеринга.

Это потому, что мы всегда изначально устанавливаем img1 как currentImgSrc? 

const [imgSrcOne, setImgSrcOne] = useState(currentImgSrc)

ошибки в блоке if / else? или устанавливает значение useState в ответе, вызывая ошибку

попытался удалить блок if / else, чтобы приложение работало

enter image description here

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

    </>
  )


}
...