Столкнулся с интересным багом.
Я не представляю почему, но при клике функция отрабатывает бесконечное количество раз.
Вот, по-моему, важные отрезки кода:
const [votedFor, setVotedFor] = useState<number | boolean[] | false> (/*long function*/),
isChosen = !!votedFor;
const setVotedFor1 = useCallback ((index: number) => {//This is that function
if (IsMultiVoices) {
if ( (votedFor as boolean[])[index]) {
const newVotedFor = JSON.parse(JSON.stringify(votedFor));
newVotedFor[index] = false;
setVotedFor1(newVotedFor);
} else {
const newVotedFor = JSON.parse(JSON.stringify(votedFor));
newVotedFor[index] = true;
setVotedFor1(newVotedFor);
}
} else {
setVotedFor(index);
}
}, []);
return (
<div className={styles.surveyBlock} style={{background: background}}>
{
survey.map( (value, index) => {
return (
<SurveyInSiteLine key={index} index={index} isMultiVoices={IsMultiVoices} setChosen={setVotedFor1} isChosen={isChosen}
isItChosen={votedFor ? IsMultiVoices ? (votedFor as boolean[])[index] : votedFor === index : false}
numberOfVoice={value.voices.Number} text={value.text}
/>
);
})
}
</div>
);
Компонент SurveyInSiteLine:
export const SurveyInSiteLine: FC<{ text: string, isChosen: boolean, isItChosen: boolean, index:number, setChosen: (index: number) => void, isMultiVoices: boolean, numberOfVoice: number }> =
memo (({text, setChosen, isChosen, isMultiVoices, isItChosen, numberOfVoice, index}) =>
{
return (
<div className={styles.surveyLine}>
<div className={isMultiVoices ? styles.textBlock + ' ' + styles.multi : styles.textBlock}>
<div className={styles.text}>
{text}
</div>
{isChosen
?
<div className={styles.number}>{numberOfVoice}</div>
:
<></>
}
</div>
{isMultiVoices
?
<Checkbox onChange={() => {setChosen(index)} }/>
:
<></>
}
</div>
);
});
По клику на CkeckBox отрабатывает onChange и срабатывает колбек, но он отрабатывает бесконечное количество раз!