使用 useEffect 将应用程序的打开时间存储到数组中时出现问题

Question

我遇到了一个问题，当我更改用户的打开时间时，应用程序在第一次更改中运行良好，但从第二次更改开始，它将清除存储时间数据的数组，然后进程将从头开始重新启动。如果我没有把任何东西放在useEffect依赖项中，应用程序就会正常工作，但每次日期更改时我都必须重新加载应用程序。

以下是处理开放时间数据的代码：

curStreakUpdate = (date: string) => {
const nearliestDateOpen = this.currentStreak[this.currentStreak.length - 1];
const dateNear: any = new Date(nearliestDateOpen);
const dateNow: any = new Date(date);
if (this.currentStreak.length === 0) {
this.currentStreak.push(date);
this.setLongestStreak(this.currentStreak.length);
this.totalPrays += 1;
} else {
this.checkNearliestOpenDate(dateNow, dateNear, date);
}
console.log(this.currentStreak);
};
checkNearliestOpenDate = (dateNow: any, dateNear: any, date: string) => {
if (dateNow - dateNear !== 0) {
if (dateNow - dateNear === 86400000) {
if (!this.currentStreak.includes(date)) {
this.currentStreak.push(date);
this.setLongestStreak(this.currentStreak.length);
}
} else {
this.currentStreak = [];
}
this.totalPrays += 1;
}
};

-以下是每当用户打开应用程序时，我使用useEffect钩子存储打开时间的地方：

const {curStreakUpdate} = useStore().streakStore;
const dt = new Date('2022-09-14').toISOString().split('T')[0];
useEffect(() => {
AppState.addEventListener('change', (state) => {
if (state === 'active') {
curStreakUpdate(dt);
// AsyncStorage.clear();
}
});
}, [dt]);

这是输出

Array [
"2022-09-15",
]
Array [
"2022-09-15",
]
Array [
"2022-09-15",
"2022-09-16",
]
Array []
Array [
"2022-09-16",
]

Answer 1

如果我没有将任何东西放在useEffect依赖项中，则应用程序工作正常，但每次更改日期时我都必须重新加载应用程序。

你不必用cmd-r重新加载应用程序，当你关闭/终止应用程序时，我应该足够了。

操作系统iOS/Android通常会杀死在后台运行较长时间的应用程序。因此，在大多数情况下，没有必要在现实世界中手动终止应用程序。

checkNearliestOpenDate = (dateNow: any, dateNear: any, date: string) => {
if (dateNow - dateNear !== 0) {
if (dateNow - dateNear === 86400000) { // I think this should be >= or <=
if (!this.currentStreak.includes(date)) {
this.currentStreak.push(date);
this.setLongestStreak(this.currentStreak.length);
}
} else {
this.currentStreak = [];
}
this.totalPrays += 1;
}
};

此外，你应该清理你的监听器，否则你会在视图打开时添加另一个监听器。而且你必须确保你目前还没有添加一个监听器——你会在每次dt更改时添加一个监听程序。我不在乎你是否真的需要useEffect来实现你想要实现的东西。

useEffect(() => {
const listener = AppState.addEventListener('change', (state) => {
if (state === 'active') {
curStreakUpdate(dt);
// AsyncStorage.clear();
})
return () =>
listener.remove()
});
}, [dt]);