Запуск useState

Question

У меня есть компонент, и я делаю его условно с разными реквизитами.

      {activeNavItem === 'Concept Art' ? (
        <Gallary
          images={conceptArtImages}
          sectionRef={sectionRef}
        />
      ) : (
        <Gallary
          images={mattePaintingImages}
          sectionRef={sectionRef}
        />
      )}

Этот компонент имеет useState(false) и useEffect крючки. useEffect определяет, когда позиция экрана достигает элемента dom, и она вызывает от useState до true: elementPosition < screenPosition. Тогда мой state запускает класс на элементе dom: state ? 'animationClass' : ''.

const Gallary = ({ images, sectionRef }) => {
  const [isViewed, setIsViewed] = useState(false);

  useEffect(() => {
    const section = sectionRef.current;

    const onScroll = () => {
      const screenPosition = window.innerHeight / 2;
      const sectionPosition = section.getBoundingClientRect().top;
      console.log(screenPosition);

      if (sectionPosition < screenPosition) setIsViewed(true);
    };

    onScroll();
    window.addEventListener('scroll', onScroll);

    return () => {
      window.removeEventListener('scroll', onScroll);
    };
  }, [sectionRef]);

  return (
    <ul className="section-gallary__list">
      {images.map((art, index) => (
        <li
          key={index}
          className={`section-gallary__item ${isViewed ? 'animation--view' : ''}`}>
          <img className="section-gallary__img" src={art} alt="concept art" />
        </li>
      ))}
    </ul>
  );
};

Проблема: он работает на моем первом рендере. Но когда я переключаю компонент с разными реквизитами, мой state изначально равен true, и у меня нет анимации.

Я замечаю, что если у меня есть два компонента (ComponentA, ComponentB) вместо одного (* 1020) *) отлично работает.

Answer 1

попробуйте установить isViewed в значение false, если ваш компонент не отображается следующим образом:

if (sectionPosition < screenPosition && !isViewed){
setIsViewed(true);
}
else{
if(isViewed) 
   setIsViewed(false);
}

, и вы можете сделать это следующим образом:

if (sectionPosition < screenPosition && !isViewed){
setIsViewed(state=>!state);
}
else{
if(isViewed) 
   setIsViewed(state=>!state);
}

плюс нет необходимости рендерить один и тот же компонент несколько раз, вы можете менять только реквизиты:

  <Gallary
      images={activeNavItem === 'ConceptArt'?conceptArtImages:mattePaintingImages}
      sectionRef={sectionRef}
    />