Блог

как вы могли заметить, я новичок в React Native и в настоящее время застрял на недопустимом вызове. Я знаю правила звонков на крючок, поэтому для меня это просто не имеет никакого смысла.
Я создал три состояния с useStates и пытаюсь обновлять их при каждом повторном отправке с помощью useState(). Что я делаю не так?
Кроме того, есть ли способ обновить значение состояния с помощью кнопки?

Это сообщение об ошибке:

Ошибка: Неверный вызов соединения. Крючки могут вызываться только внутри тела функционального компонента. Это может произойти по одной из следующих причин: (вы их знаете)

Вот мой код:

     import { StatusBar } from 'expo-status-bar';
    import React, { useState, useEffect } from 'react';
    import { Text, View, ScrollView, SafeAreaView, ActivityIndicator, Dimensions } from 'react-native';
    import { fetchData_today } from '../components/api';
    import { styles } from '../style/styles';
    import Tile from '../components/tile';
    import { Icon } from 'react-native-elements';
    import { checkConnection } from '../components/checkInternet';
    import AsyncStorage from '@react-native-async-storage/async-storage';
    const { width, height } = Dimensions.get("window");
    
    export default function Home_Today({ navigation }) {
    
        const [value, setValue] = useState({});
        const [isConnected, setConnected] = useState(false);
        const [apiData, setApiData] = useState({});
    
        useEffect(() => {
            try {
    
                // get stored data
                const value = AsyncStorage.getItem('@storage_Key');
                if (value !== null) {
                    setValue(JSON.parse(value));
                } else { console.log("If nicht erfüllt"); }
    
    
                // is connected?
                setConnected(checkConnection());
    
                // fetch api
                setApiData(fetchData_today());
    
    
            } catch (err) { console.warn('data did not fetch:', err) }
    
        }, [])
    
        let load = true;
    
        const initialiseTiles = () => {
            try {
                if (isConnected || isConnected === null) {
                    createTiles(apiData);
                } else {
                    createTiles(value);
                }
            } catch (err) {
                console.warn('in initialiseTiles', err);
                alert("Der Vertretungsplan konnte nicht geladen werden. Überprüfen Sie Ihre Netzwerkverbindung.");
            };
            load = false;
        };
    
        const createTiles = (_data) => {
            console.log("_data length ::", _data.length)
            tiles_array_today = [];
            for (let i = 0; i < _data.length; i  ) {
                //if (_data[i]["classes"] === "12" || _data[i]["classes"] === "11, 12")
                tiles_array_today.push(<Tile
                    key={i   1}
                    text={_data[i]["absent"]}
                    lessons={_data[i]["lessons"]}
                    kind={_data[i]["type"]}
                    room={_data[i]["newRoom"]}
                    comment={_data[i]["comments"]}
                    class={_data[i]["classes"]}
                    subject={_data[i]["subject"]}
                />);
            };
        }
    
        initialiseTiles();
    
        const getLoad = () => {
            return load;
        };
    
        return (
            <View style={styles.container}>
                <SafeAreaView>
                    <View style={{ flexDirection: 'row', alignItems: 'stretch' }} width={width}>
                        <View style={{ justifyContent: 'flex-start', alignItems: 'flex-start', marginLeft: 0, marginTop: 60, opacity: 0.8 }}>
                            <Icon style={{ justifyContent: 'flex-start', alignItems: 'flex-start' }} name='sync' onPress={() => initialiseTiles()} color='gray' />
                        </View>
                        <View style={{ justifyContent: 'flex-end', alignItems: 'flex-end', marginLeft: 0, marginTop: 60, opacity: 0.8 }}>
                            <Icon style={{ justifyContent: 'flex-end', alignItems: 'flex-end' }} name='settings' onPress={() => navigation.navigate("Settings")} />
                        </View>
                    </View>
                    <StatusBar style="auto" />
                    <View style={styles.wrapper}>
                        <View style={{ alignItems: 'center', justifyContent: 'space-evenly', flexDirection: 'row' }}>
                            <Text style={styles.header}>Vertretungsplan</Text>
                        </View>
                        <View style={styles.scrollWrapper}>
                            <Text style={styles.textDay}>{"Heute:"}</Text>
                            <ScrollView>
                                {load ? <ActivityIndicator /> : tiles_array_today}
                            </ScrollView>
    
                        </View>
    
                    </View>
                </SafeAreaView>
            </View>
        );
    }