React Native Calendar点颜色显示不正确

Question

我用react native开发了一个应用程序。我使用"react-native-calendar"库。但是我有一个错误。

我正在从异步存储中获取数据，并在日历上弹出一个点。

存储的数据

listnumber: 2

1日历:2023-03-30

2023 - 03 - 30日历:happy-pink

2日历:2023-03-31

2023 - 03 - 31 -日历:happy-yellow

这是我的代码。

import React, {useState, useEffect} from 'react';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {Calendar} from "react-native-calendars";
import {View, StyleSheet} from 'react-native';
import AsyncStorage from "@react-native-async-storage/async-storage";
function HomeScreen({navigation}) {
const [markedDates, setMarkedDates] = React.useState(null);
const [dates, setDates] = React.useState([]);
const readCalendarData = async () => {
try {
const listnumber = await AsyncStorage.getItem("listnumber");
const listnumbertoint = parseInt(listnumber, 10);
for (var i = 1; i <= listnumbertoint; i++) {
console.log(i);
const date = await AsyncStorage.getItem(i + "calendar");
console.log(date);
const color = await AsyncStorage.getItem(date + "calendar");
console.log(color);
if (color == "happy-pink" || color == "happy2-pink") {
dates.push(date);
let obj = dates.reduce(
(c, v) =>
Object.assign(c, {
[v]: { marked: true, dotColor: 'pink' },
}),
{},
);
setMarkedDates(obj);
}else if (color == "happy-yellow"){
dates.push(date);
let obj = dates.reduce(
(c, v) =>
Object.assign(c, {
[v]: { marked: true, dotColor: 'yellow' },
}),
{},
);
setMarkedDates(obj);
}else if (color == "sad-skyblue") {
dates.push(date);
let obj = dates.reduce(
(c, v) =>
Object.assign(c, {
[v]: { marked: true, dotColor: 'skyblue' },
}),
{},
);
setMarkedDates(obj);
}else if (color == "soso-green") {
dates.push(date);
let obj = dates.reduce(
(c, v) =>
Object.assign(c, {
[v]: { marked: true, dotColor: 'green' },
}),
{},
);
setMarkedDates(obj);
}else if (color == "soso-orange") {
dates.push(date);
let obj = dates.reduce(
(c, v) =>
Object.assign(c, {
[v]: { marked: true, dotColor: 'orange' },
}),
{},
);
setMarkedDates(obj);
}else{
dates.push(date);
let obj = dates.reduce(
(c, v) =>
Object.assign(c, {
[v]: { marked: true, dotColor: 'pink' },
}),
{},
);
setMarkedDates(obj);
}
}
} catch (error) {
console.error(error);
}
};
useEffect(() => {
readCalendarData();
}, [])
return(
<SafeAreaProvider>
<View>
<Calendar
markedDates={markedDates}
onDayPress={(day) => {
navigation.push('Detail', {day});
}}
/>
</View>
</SafeAreaProvider>
);
}
export default HomeScreen;

当它工作时，这些点在日期2023-03-30和2023-03-31上显示得很好，但是颜色是黄色的。

并将数据删除保存为2023-03-30，显示为天蓝色，将数据保存为2023-03-31，显示为绿色。

但这一次它显示的很好，但问题是颜色是绿色的。

你能帮我吗?如果可以，请帮助我。

Answer 1

当颜色为"happy-pink"或"happy2-pink"时，所有标记日期的选择颜色变为"pink"的代码存在问题。这是因为setMarkedDates函数在循环中被调用，并且用一个新对象覆盖整个markedDates对象，该对象只具有具有相应颜色的当前日期。

要解决这个问题，您可以在循环之外创建一个临时对象，并使用它来累积带有相应颜色的标记日期。然后，您可以在循环之外设置markedDates状态。

下面是更新后的代码:

const readCalendarData = async () => {
try {
const listnumber = await AsyncStorage.getItem("listnumber");
const listnumbertoint = parseInt(listnumber, 10);
const tempMarkedDates = {}; // create temporary object
for (var i = 1; i <= listnumbertoint; i++) {
console.log(i);
const date = await AsyncStorage.getItem(i + "calendar");
console.log(date);
const color = await AsyncStorage.getItem(date + "calendar");
console.log(color);
let dotColor;
switch (color) {
case "happy-pink":
case "happy2-pink":
dotColor = 'pink';
break;
case "happy-yellow":
dotColor = 'yellow';
break;
case "sad-skyblue":
dotColor = 'skyblue';
break;
case "soso-green":
dotColor = 'green';
break;
case "soso-orange":
dotColor = 'orange';
break;
default:
dotColor = 'pink';
}
if (!tempMarkedDates[date]) {
tempMarkedDates[date] = { marked: true, dotColor }; // add new date to temporary object
} else {
tempMarkedDates[date].dotColor = dotColor; // update existing date with new color
}
}
setMarkedDates(tempMarkedDates); // set markedDates state once outside of the loop
} catch (error) {
console.error(error);
}
};