Почему callback отрабатывает бесконечность раз при клике react?

Столкнулся с интересным багом.
Я не представляю почему, но при клике функция отрабатывает бесконечное количество раз.
Вот, по-моему, важные отрезки кода:
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 и срабатывает колбек, но он отрабатывает бесконечное количество раз!
  • Вопрос задан
  • 52 просмотра
Решения вопроса 1
Alexandroppolus
@Alexandroppolus
кодир
У тебя там бесконечная рекурсия, если IsMultiVoices истинно
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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