@JDMeezy

Как правильно контролировать хук use-sound?

function SelectNotify() {

    const {sounds,activeSound} = useSelector((store) => store.timer);

    const [play] = useSound(sounds[activeSound].src);

    const selectRef = useRef();

    const dispatch = useDispatch();

    const [active,setActive] = useState(false);

    const handelClickOutside = (event) => {
        if (selectRef.current && !selectRef.current.contains(event.target)) {
            setActive(false);
        }
    }

    const handleChangeSound = (idSound) => {
        dispatch(changeSound(idSound));
    }

    useEffect(()=>{
        play();
    },[play])

    useEffect(()=>{
        document.addEventListener('click',handelClickOutside)
        return () => {
            document.removeEventListener('click',handelClickOutside)
        }
    },[])


    return (
        <div className='d-flex justify-content-between align-items-center itemOption col-12' >
            <h5>Select the sound Notification </h5>
            <div onClick={() => setActive(!active)} ref={selectRef}  className='d-flex align-items-center justify-content-between edSelect'>
                {sounds[activeSound].title}
                <AiFillCaretDown id='selectIcon' className={active && 'active'}  />
                <CustonSelectWrapper open={active} >
                        <ul>
                            {
                                sounds.map((item,index)=>(
                                    <li onClick={() => handleChangeSound(index)} key={index} >{item.title}</li>
                                ))
                            }
                        </ul>
                </CustonSelectWrapper> 
            </div>
        </div>
        );
}

export default SelectNotify;


Разрабатываю select с различными звуками, дабы пользователь мог выбирать предпочитаемый звук уведомления. Возник с проблемой. При инициализации метода play из хука useSound, хук заставляет вызывать перерисовку компонента целых два раза(помимо первого рендера), если путь к файлу был указан верно. Как предотвратить вызов метода play при первом рендере, и вызывать play() только тогда, когда пользователь поменяет звук посредством функции handleChangeSound, где в dispatch передаётся id выбранного звука.
  • Вопрос задан
  • 146 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы