我目前正在try 在react native中迭代json.JSON有一个数量可变的返回,其格式非常奇怪,不幸的是,我不能做太多改变JSON的创建方式,所以我希望能得到关于如何正确解析它的建议.

下面是获取json并显示值的代码:

import React, { useState, useEffect } from "react";
import { ActivityIndicator, FlatList, SafeAreaView, StatusBar, StyleSheet, Text, View, TouchableOpacity } from "react-native";

const App = () => {
  const [selectedId, setSelectedId] = useState(null);
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState({});
  const [counter, setCounter] = useState(0);

  const getJSON = async () => {
    const response = await fetch('URL');
    const json = await response.json();
    setData(json.Items);
    setCounter(json.Count);
    setLoading(false);
  }

  useEffect(() =>{
    getJSON();
  }, []);

  return (
    <View style={{ flex: 1, padding: 24 }}>
    {isLoading ? <ActivityIndicator/> : (
      <FlatList
        data={data}
        keyExtractor={({ Items }, index) => id}
        renderItem={({ item }) => (
          <Text>{item.Items}</Text>
        )}
      />
    )}
  </View>
  );
};

下面是获取的JSON()

{
    "Count": 1,
    "Items": [{
        "building": {
            "S": "Wash"
        },
        "mac": {
            "S": "FF:FF:FF:FF:FF:FF"
        },
        "name": {
            "S": "test asset"
        },
        "asset_id": {
            "S": "01"
        },
        "floor": {
            "S": "1"
        },
        "room": {
            "S": "102"
        }
    }],
    "ScannedCount": 1
}

任何帮助都将不胜感激.我对解析JSON仍然很陌生

推荐答案

我建议将Items响应值预处理为更可用的格式,以便呈现.您需要"解包"每个嵌套外部键的嵌套S属性.然后,可以更轻松地映射/访问item元素属性.

例子:

const { Items } = {
  Count: 1,
  Items: [
    {
      building: { S: "Wash" },
      mac: { S: "FF:FF:FF:FF:FF:FF" },
      name: { S: "test asset" },
      asset_id: { S: "01" },
      floor: { S: "1" },
      room: { S: "102" }
    },
  ],
  ScannedCount: 1
};

const data = Items.map((obj) =>
  Object.entries(obj).reduce((items, item) => {
    const [key, { S: value }] = item;
    return {
      ...items,
      [key]: value
    };
  }, {})
);

console.log(data);

代码:

function App() {
  const [selectedId, setSelectedId] = useState(null);
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  const [counter, setCounter] = useState(0);

  const getJSON = async () => {
    const response = await fetch("URL");
    const json = await response.json();
    const { Count, Items } = json;

    const data = Items.map((obj) =>
      Object.entries(obj).reduce((items, item) => {
        const [key, { S: value }] = item;
        return {
          ...items,
          [key]: value
        };
      }, {})
    );

    setData(data);
    setCounter(Count);
    setLoading(false);
  };

  useEffect(() => {
    getJSON();
  }, []);

  return (
    <div className="App">
      {isLoading ? (
        <h2>Loading...</h2>
      ) : (
        <FlatList
          data={data}
          keyExtractor={({ asset_id }) => asset_id}
          renderItem={({ item }) => (
            <View key={item.asset_id}>
              <Text>
                Location: {item.building} {item.floor}-{item.room}
              </Text>
              <Text>Name: {item.name}</Text>
              <Text>MAC: {item.mac}</Text>
              <Text>Asset Id: {item.asset_id}</Text>
            </View>
          )}
        />
      )}
    </div>
  );
}

Edit json-fetch-parsing-issues-in-react-native

Reactjs相关问答推荐

实时收听react前端应用程序中的webhook响应

Npm运行构建`在Next.js 14中不起作用

TypeError:b不是React.js中的函数错误

我想删除NextJs中的X轴标签APEXCHARTS

Reaction Ploly:如何在多个子情节中共享zoom 状态

当我try 部署我的Reaction应用程序时,为什么在此PrevState语句中收到语法错误?

react ';S使用状态不设置新状态

如何使ionic 面包屑在州政府条件下可点击?

阻止组件更新的多分派Redux Thunk或setState是否有任何问题

REACT: UseState 没有更新变量(ant design 模态形式)

提前输入错误:选项类型上不存在属性名称

当我在 React Router Dom 中使用两个参数并直接在页面上导航时,数据获取没有发生

如何初始化 redux 全局存储 preloadedState

我正在通过 API(有效)从 MongoDB 传递数据.可视化但我不断收到此 TypeError: Cannot convert undefined or null to object

谁能根据经验提供有关 useEffect 挂钩的更多信息

如何在react 日历中自定义带有圆形边框的日期项?

Lodash 在命名导入中导入整个包

为什么重新渲染不会影响 setTimeout 的计数?

在react 钩子中将数组添加到数组状态给出一个数字

为什么我不能使用 formik 更改此嵌套对象中的值