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 выбранного звука.