Thiết kế website giá rẻ

Question

I have problem with Hooks order. What is funny, before I don’t have this problem. I was working on dark mode in my app and one time when I has reloaded my app console show me this problem. I didn’t touched this part of code where is this problem. Problem is in ‘loadEvents’ function:

export default function CalendarScreen() {

  const navigation = useNavigation();

  const [weeklyData, setWeeklyData] = useState([]);
  const [futureData, setFutureData] = useState([]);
  const [olderData, setOlderData] = useState([]);

  const todayDate = createDate()
  
  const { theme } = useDarkMode()
  const styles = createStyles(theme)

  const { language } = useLanguage();
  const getTranslatedText = (key) => {
    return appLanguage[language][key];
  }

  
  useEffect(() => {

    const loadData = navigation.addListener('focus', () => {
      loadEvents(setWeeklyData, setFutureData, setOlderData)
      console.log('loadEvents content in second file: ', loadEvents())
    });
    
    return loadData
  }, [navigation])

Here is the part of ‘loadEvents’ function in queries file:

export const loadEvents = (setWeeklyData, setFutureData, setOlderData) => {
    selectThisWeekEvents(setWeeklyData)
    selectNextWeekEvents(setFutureData)
    selectOlderEvents(setOlderData)
}

  
export const selectThisWeekEvents = (setWeeklyData) => {
  
    db.transaction(tx => 
        tx.executeSql(
            'SELECT '+ 
                'events.event_id,'+
                'events.title,'+
                'events.description,'+
                'events.subject_id,'+
                'events.class_id,'+
                'substr(events.deadline, 9, 2) || "." || substr(events.deadline, 6, 2) || "." || substr(events.deadline, 1, 4) AS deadlineDate,'+
                'substr(events.deadline, 12, 5) AS deadlineTime,'+
                'events.deadline,'+
                'subjects.subject_name, '+
                'classes.class_name '+
            'FROM events '+
            'RIGHT JOIN subjects ON events.subject_id = subjects.subject_id '+
            'RIGHT JOIN classes ON events.class_id = classes.class_id '+
            'WHERE events.title IS NOT NULL '+
            'AND events.deadline BETWEEN datetime('now') AND datetime('now', '+7 day') '+
            'ORDER BY events.deadline ',
            [],
            (_, {rows}) => {
                const data = rows._array;
                console.log('DATA -- This week events loaded: n', data);
                setWeeklyData(data)
            },
            (error) => console.log('ERROR -- Events loading failed' + error)
        )  
    )
}

In queries file, there is event data, but in second file there is undefined, console logs:

LOG  DATA -- This week events loaded:
 [{"class_id": 1, "class_name": "bbbb", "deadline": "2024-06-28T10:24:51.491Z", "deadlineDate": "28.06.2024", "deadlineTime": "10:24", "description": "asdasdsa", "event_id": 1, "subject_id": 1, "subject_name": "aaaa", "title": "proba 1"}]

 LOG  loadEvents content in second file:  undefined

Here is the error:

 ERROR  Warning: React has detected a change in the order of Hooks called by CalendarScreen. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks   

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useContext
2. useContext                 useContext
3. useState                   useState
4. useState                   useState
5. useState                   useState
6. useContext                 useContext
7. useContext                 useContext
8. useEffect                  useEffect
9. undefined                  useContext
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

I have tried many options but anything works. Before i don’t have this problem and I didn’t modify this part of code.

When in app there is no events this error don’t show.

I tried to use callbacks.
I have read on stackoverflow other similar posts but they didn’t help me.

Danh mục