1

我一直对 react native 有一些困惑，我希望社区可以帮助解决它。我正在尝试从 API 接收一些公告的列表，并在平面列表中显示每个公告。

我可以接收和解析 JSON，我可以显示在状态中编码的项目，但是我无法在状态中存储 JSON 数据。

所以问题是这样的：我如何存储从 API 接收到的 JSON 数据，并以 React Native 的状态存储？

这是我的代码（我试图修剪，那里可能有一些卡顿，对此感到抱歉）

import { StatusBar } from 'expo-status-bar';
import * as React from 'react';
import { useState } from 'react';
import { FlatList, Text, View, StyleSheet, TouchableOpacity, Image } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';

import Announcement from '../components/Announcement';
import BottomBar from '../components/BottomBar';
import TopBar from '../components/TopBar';

state = {
    data: [
        {title: 'This is a title', text:'yadda yadda'},
        {title: 'yup, still a title', text:'blah blah blah'},
        {title: 'tidal', text:'Lots and lots of details'}
    ],
}

function AnnouncementsScreen(props) {

    //const [count, setCount] = useState(0);
    
    
    

    fetch('https://eo9260z47k.execute-api.us-east-2.amazonaws.com/default/getAnnouncements', {
        method: 'GET',
        headers: {
            // Accept: 'application/json',
            'x-api-key': 'kezCnfAATA2cs6bHh39sg4IEXvPkfnaM220seEk2',
            'Content-Type': 'application/json',
        },       
    })
    .then((response) => response.json())
    .then((responseJson) => {

        //This was a bit of a failed attempt
        //setCount(responseJson.toString())
        //console.log("state: " + state)


        
        

    })
    .catch((error) => {
        console.error(error);
    });





    return (
        <View style={styles.background}>
            <View style={styles.mainContent}>
                <View style = {styles.announcementsWrapper}>
                <Text style = {styles.sectionTitle}>Announcements</Text> 
                    
                    <View style = {styles.announcementList}>
   
                        <FlatList
                            data = {state.data}
                            keyExtractor={(x, i) => i.toString()}
                            renderItem={({item}) => <Announcement  title = {item.title} text = {item.text}/>}
                        />
                    </View>
                </View>
            </View>
        </View>

        

    );
}
export default AnnouncementsScreen;


const Drawer = createDrawerNavigator();

const styles = StyleSheet.create({
    background:{
        flex: 1,
        backgroundColor: '#2d0f4c',
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
    },
    announcementsWrapper : {
        paddingTop: 20,
        paddingHorizontal:20,
    },
    announcementList:{
        color: '#f1cf5b',
        fontSize: 24,
    },
    sectionTitle:{
        color: '#f1cf5b',
        fontSize:45,
        fontWeight: 'bold',
    },
    mainContent: {
        flex: 8,
    },
});

JSON看起来像这样

Object {
  "0": Array [
    "11001",
    "1",
    "Test Announcement",
    "This is a test announcement to prove that the database works",
    "2021-03-18 19:30:00",
  ],
  "1": Array [
    "01001",
    "2",
    "Lost socks",
    "I have lost my favorite socks. If you find them, please let me know",
    "2021-03-22 10:30:00",
  ],
  "2": Array [
    "10101",
    "3",
    "Found Socks",
    "Please disreguard the previous statement. I found my missing socks.",
    "2021-03-18 19:30:00",
  ],
  "3": Array [
    "01101",
    "4",
    "TestAnno",
    "Something or other",
    "2021-01-20 11:20:00",
  ],
  "4": Array [
    "11100",
    "5",
    "asdfasdfsadfasfd",
    "asdfasdfasdfsadf",
    "2021-04-21 15:38:44",
  ],
}
4

1 回答 1

1

您应该使用useState将状态存储在函数组件中：https ://reactjs.org/docs/hooks-state.html

你的fetch调用应该在内部完成useEffect——否则，它会在每次渲染时发生：https ://reactjs.org/docs/hooks-effect.html

内部function AnnouncementsScreen(props) {：

const [data, setData] = useState();
useEffect(() => {
  fetch('https://eo9260z47k.execute-api.us-east-2.amazonaws.com/default/getAnnouncements', {
    method: 'GET',
    headers: {
        // Accept: 'application/json',
        'x-api-key': 'kezCnfAATA2cs6bHh39sg4IEXvPkfnaM220seEk2',
        'Content-Type': 'application/json',
    },       
})
.then((response) => response.json())
.then((responseJson) => {
    setData(responseJson)
})
.catch((error) => {
    console.error(error);
});
},[]);

data然后，您可以通过在视图层次结构中使用来访问您设置的状态。因为您返回的 JSON 与您现在使用的测试状态明显不同，所以您需要以Announcement不同的方式构建组件和/或道具，但这应该让您至少开始存储状态。

于 2021-04-25T22:12:39.140 回答