时间戳

首页 > 解决方案 > 将 JSON 数据项加载到 React Native Calendar Agenda

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

问题描述

我正在尝试将 JSON 数据加载到我的日历议程中，但我做不到。也没有太多关于如何通过将 JSON 与日期进行比较来将它们加载到议程项目中的文档。有人可以帮帮我吗。这是我的 JSON 数据。我正在尝试使用 Agenda_TimeStamp 字段加载特定日期的项目。我有另一个页面，我将数据发布到我的 sql 数据库中，我从中提取数据。我想显示与 Agenda_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;

标签： javascriptjsonreactjsreact-nativereact-native-calendars

解决方案

您可以在 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'}]
  }}

推荐阅读