Блог

Главная - Вопросы по программированию - Недопустимый вызов соединения в функциональном компоненте

Недопустимый вызов соединения в функциональном компоненте

#react-native #react-hooks

Вопрос:

Я использую React Native, и я получаю эту ошибку: Render Error Invalid hook call. Hooks can only be called inside of the body of a function component...

Проблема в том, что с крючком, который я использую (useState), вроде бы все в порядке, ошибка говорит о том, что у меня проблема в этой строке:

const [isOpen, setIsOpen] = useState<boolean>(false);

Я читал Правила Крючков, но не вижу в этом ничего плохого.

Это моя составляющая:

 const GoalCard = (goal: IGoal) => { 
    const [isOpen, setIsOpen] = useState<boolean>(false);
    const btnsOpacity = useRef(new Animated.Value(0)).current;
    const initialeCardHeight = goal.deadline != undefined ? 150 : 80
    const cardHeight = useRef(new Animated.Value(initialeCardHeight)).current;
    
    
    const toggleCard = () => {
        setIsOpen(!isOpen);
        
        resizeCard();
        if(isOpen) {
            fadeOutBtns();
        } else {
            fadeInBtns();
        }
    }
}

Здесь я вызываю toggleCard (в том же файле):

 const renderDeadline = () => {
    return (
        <View style={styles.footer}>
            <View style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
                <Icon name="time-outline" size={28} color="#A0A4BA" style={{marginRight: 4}}/>
                <Text style={styles.deadlineText}>Deadline</Text>
                <Text style={styles.dateText}>test</Text>
            </View>
            <TouchableOpacity onPress={() => toggleCard()}>
                <Icon name={isOpen ? "chevron-up-outline" : "chevron-down-outline"} size={21} color="#A0A4BA"/>
            </TouchableOpacity>
        </View>
    )
}

renderDeadline компонент находится внутри GoalCard , и я увидел в Правилах крючков, что это может быть причиной этой ошибки.
Поэтому я попытался удалить его и вместо этого использовать JSX renderDeadline напрямую GoalCard , но получил ту же ошибку (попытался удалить приложение и npm run iOS еще раз, а не просто горячую перезагрузку).

Комментарии:

1. Скорее всего, это из-за множества компонентов в одном файле. Убедитесь, что в файле есть только один функциональный компонент. Я знаю, вы сказали, что пробовали это, но, учитывая, что код выглядит нормально, я бы посмотрел на это еще раз.

2. @VladL Спасибо, я попытался удалить несвязанные (с крючком useState) функциональные компоненты из файла и перезагрузить, но все равно получил ту же ошибку.

3. Вы можете показать весь файл целиком?

4. @VladL Спасибо, я удалил большую часть файла (каждый раз, когда я удалял крючок, у меня была ошибка с другим крючком) Я постараюсь начать все сначала.

Метки: