Задать вопрос

Почему 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 и срабатывает колбек, но он отрабатывает бесконечное количество раз!
  • Вопрос задан
  • 55 просмотров
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    React-разработчик
    3 месяца
    Далее
  • Merion Academy
    Frontend-разработка на React
    4 месяца
    Далее
  • ProductStar
    React: отточите навыки интерфейсной разработки
    6 недель
    Далее
Решения вопроса 1
Alexandroppolus
@Alexandroppolus
кодир
У тебя там бесконечная рекурсия, если IsMultiVoices истинно
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
ITK academy Нижний Новгород
от 50 000 до 90 000 ₽
IT ATLAS Москва
от 200 000 до 250 000 ₽
ITK academy Казань
от 50 000 до 90 000 ₽