如何在 React Native 中以状态存储 JSON 项

大佬教程收集整理的这篇文章主要介绍了如何在 React Native 中以状态存储 JSON 项，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何在 React Native 中以状态存储 JSON 项？

我一直对 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.","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",}

解决方法

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);
});
},[]);

大佬总结

以上是大佬教程为你收集整理的如何在 React Native 中以状态存储 JSON 项全部内容，希望文章能够帮你解决如何在 React Native 中以状态存储 JSON 项所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。