如何在 React Native 中的 state 中存储 JSON 项目

Question

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

I can receive and parse the JSON, I can display Items that are coded in state, but I'm having trouble storing JSON data in state.

所以问题是这样的：我如何将来自 API 的 JSON 接收到的数据存储在 state 中？

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

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",
  ],
}

Answer 1

You should use useState to store state inside a function component: 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访问您设置的 state。 因为您返回的 JSON 与您现在使用的测试 state明显不同，您需要以不同的方式构建您的Announcement组件和/或道具，但这应该让您至少开始存储 Z95ED39E2EA9A9EZEF88 .