javascript - 将 JSON 数据项加载到 React Native 日历议程中

Question

我正在尝试将 JSON 数据加载到我的日历议程中，但我做不到。关于如何通过将 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
    }

我正在尝试使用此 React native 代码将此数据加载到议程中

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'}]
  }}