Блог

Я пытаюсь вызвать эффект использования, только когда мой массив изображений больше 0. Но в консоли я замечаю, что он запускается дважды, когда его 0 и больше 0.

 import { useSelector, useDispatch } from 'react-redux';
import { myModules } from '#/redux/modules';

    const Component = () => {
     const images = useSelector(getImages)
     const dispatch = useDispatch();
    
      useEffect( () =>  {
        dispatch(myModules.actions.setMaskVisible(true));
      }, [images.length > 0, dispatch]);
    
    }
 

Как я могу заставить этот эффект использования работать ТОЛЬКО тогда, когда массив изображений больше 0 ?

Это должно все исправить:

 import { useSelector, useDispatch } from 'react-redux';
import { myModules } from '#/redux/modules';

    const Component = () => {
     const images = useSelector(getImages)
     const dispatch = useDispatch();
    
      useEffect( () =>  {
          if (images.length > 0) {
            dispatch(myModules.actions.setMaskVisible(true));
          }
      }, [images, dispatch]);
    
    }
 

Оба этих подхода должны работать

 import { useSelector, useDispatch } from 'react-redux';
import { myModules } from '#/redux/modules';

    const Component = () => {
     const images = useSelector(getImages)
     const dispatch = useDispatch();
    
      useEffect( () =>  {
        if (images.length > 0) {
          dispatch(myModules.actions.setMaskVisible(true));
        }
      }, [images, dispatch]);
    
    } 

 import { useSelector, useDispatch } from 'react-redux';
import { myModules } from '#/redux/modules';

    const Component = () => {
     const images = useSelector(getImages);
     const [triggerEffect, setTriggerEffect] = useState(false);
     const dispatch = useDispatch();
     if (images.length > 0) setTriggerEffect(!triggerEffect);
      useEffect( () =>  {
        dispatch(myModules.actions.setMaskVisible(true));
      }, [triggerEffect, dispatch]);
    
    }