TypeError: undefined is not an object (evaluating 'this.openTimes.push')

Viewed 53

I want to push date time data into an array in mobX store but it keep return an error: "TypeError: undefined is not an object (evaluating 'this.openTimes.push')". Please help me, thanks. Below is the code :

RootStore.ts:

import bibleStore from './BibleStore';
import  streakStore  from './StreakStore';
import {createContext, useContext} from 'react';

export class RootStore {
bibleStore = bibleStore;
streakStore = streakStore;
}

export const rootStore = new RootStore();

export const StoreContext = createContext(rootStore);
export const useStore = () => useContext(StoreContext);

StreakStore.ts:(this one is used to store users streaks)

import AsyncStorage from '@react-native-async-storage/async-storage';
import {action, computed, makeAutoObservable, observable} from 'mobx';
import {makePersistable} from 'mobx-persist-store';

export interface Datetime {
date: string;
}


class StreakStore {

constructor() {
  makeAutoObservable(this);

}
@observable openTimes: Datetime[] =[
  {
     date:'2022-9-8'
  }
];


@action setOpenTime(openTime:Datetime) {
  console.log(typeof this.openTimes)
  this.openTimes.push({...openTime});
}
@computed get info() {
   return {
     total: this.openTimes.length,
   }
 }
}
const streakStore = new StreakStore();
export default streakStore;

Navigation.tsx:(I will get date time from useEffect here then pass it to store by function setOpenTime

import React, {useEffect} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {AppState} from 'react-native';
import {LightTheme, DarkTheme} from '../constants/Theme';
import useColorScheme from '../hooks/useColorScheme';
import {RootNavigatorStack} from './RootNavigatorStack';
import {useStore} from '../store/RootStore';
import {observer} from 'mobx-react-lite';
import {Datetime} from '../store/StreakStore';
interface Props {
  openTime: Datetime;
}

const Navigation = () => {
  const colorScheme = useColorScheme();
  const theme = colorScheme === 'dark' ? DarkTheme : LightTheme;
  const {info, setOpenTime} = useStore().streakStore;
  const dt = new Date();
  useEffect(() => {
    AppState.addEventListener('change', (state) => {
      if (state === 'active') {
        setOpenTime({date: dt.toString()});
      }
    });
  }, []);
  return (
    <NavigationContainer theme={theme}>
      <RootNavigatorStack />
    </NavigationContainer>
  );
};

export default observer(Navigation);
0 Answers
Related