将JSON数据项加载到React Native Calendar Agenda中

Question

我正试图将JSON数据加载到我的日历议程中，但无法加载。关于如何通过将JSON与日期进行比较来将其加载到议程项目中，也没有太多文档。有人能帮我吗？这是我的JSON数据。我正在尝试使用Agenta_TimeStamp字段加载特定日期的项目。我有另一个页面，在那里我可以将数据发布到我的sql数据库中，从那里我可以提取这里的数据。我想显示关于Agenta_Timestamp 的特定日期的JSON数据的内容

{
"AgendaName": null,
"User_ID": 100,
"Agenda_DESC": "TEST",
"Agenda_TIMESTAMP": "2020-08-04 02:44:14",
"Agenda_TYPE": "CO",
"Agenda_ID": 100
}

我正试图使用这个反应本机代码将这些数据加载到议程中

import axios from 'axios';
import { Calendar, CalendarList, Agenda } from 'react-native-calendars';
const HomeScreen = () => {
useEffect(() => {
const fetchData = async () => {
const result = await axios(
'http://localhost/restservice/Agenda/',
);
setData(result.data);
};
fetchData();
}, []);
const timeToString = (time) => {
const date = new Date(time);
return date.toISOString().split('T')[0];
};
const [data, setData] = useState([]);
/*  const [date, setDate] = useState(new Date()); */
const [items, setItems] = useState([]);
/*  const onChange = date => {
setDate(date);
}; */
const loadItems =(day) => {
setTimeout(() => {
for (let i = -15; i < 85; i++) {
const time = day.timestamp + i * 24 * 60 * 60 * 1000;
const strTime = timeToString(time);
if (!items[strTime]) {
items[strTime] = [];
const numItems = Math.floor(Math.random() * 3 + 1);
for (let j = 0; j < data.count(); j++) {
items[strTime].push({
name: 'Item for ' + strTime + ' #' + j,
height: Math.max(50, Math.floor(Math.random() * 150))
});
}
}
}
const newItems = {};
Object.keys(data).forEach(key => { newItems[data.Agenda_id] = data[Agenda_TYPE]; });
setItems(newItems);
}, 1000);
}

const renderItem = (item) => {
return (

<TouchableOpacity style={[styles.item, { height: item.height }]}
onPress={() => alert(item.name)}>
<Text>
{item.name}
</Text>
</TouchableOpacity>


);
};

return (
<View style={styles.container}>
<StatusBar barStyle={theme.dark ? "light-content" : "dark-content"} />

<Agenda theme={{

}}
items={items}
loadItemsForMonth={loadItems}
renderItem={renderItem}

/>


</View>
);
};
export default HomeScreen;

Answer 1

您可以在loadItems中调用fetch函数来检索数据。

同时验证该行：

Object.keys(data).forEach(key => { newItems[data.Agenda_id] = data[Agenda_TYPE]; });

应该创建一个日期作为每个键，每个项目的对象命名也应该是这样的：

items={{
'2012-05-22': [{name: 'item 1 - any js object'}],
'2012-05-23': [{name: 'item 2 - any js object', height: 80}],
'2012-05-24': [],
'2012-05-25': [{name: 'item 3 - any js object'}, {name: 'any js object'}]
}}