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);