如何从 json 文件中读取数据并使用它在 React Native 的视图组件中显示？

Question

我需要在单独的 FlatList 中显示“评分最高”以及其中的课程内容，就像 udemy 显示其内容的方式一样。但是我是 React Native 的新手，从来没有制作过这样的应用程序，所以我不知道如何从 JSON 文件中获取数据，然后像这样显示它。

json 文件：https://drive.google.com/file/d/1l9J34syhsly7S43OzGar4RQN3d6g_yZn/view?usp=sharing

我还附上了 UI 图片来解释我想说的以及我想如何显示我的 json 数据。

const Data = require("../Data/static_courses_data.json");
const CategoriesScreen = (props) => {
  const renderGridItem = (itemData) => {
    return (
      <CategoryGrid
        title={itemData.item["Title"]}
        imgUrl={itemData.item["image-url"]}
        onSelect={}
      ></CategoryGrid>
    );
  };
  return (
    <View>
      <FlatList data={Data} renderItem={renderGridItem} numColumns={2} />
    </View>
  );
};

我也试过这样但是它给了我一个错误说 Object is not a constructor(evaluating 'new_meal.default)

Answer 1

将其制作成 JS 文件并导出数据，如下所示：

data.js

const data = [
  { some: "data" }, 
  { other: "data" },
  ...
  ...
];

export default data;

然后将它导入到您想要使用它的地方，就像任何其他 JS 文件一样。

SomeReactNativeComponent.js

import data from './path/to/data.js'
// ... other imports

const SomeReactNativeComponent = ( props ) => {
...

// component functions

...

}

编辑，OP 请求的方法：

fetch("./path/to/static_courses_data.json")
  .then(response => response.json())
  .then(json => console.log(json));

Answer 2

通过直接导入您的 .json 文件，您可以执行以下操作，但是这些项目不会根据您的具体情况按类别分开。我只是把所有的标题都拿来举例了。

首先您使用 Object.keys 从您的 Top Rated 中获取所有键，然后使用 Object.values 获取它们的值

这个 link 可能会有帮助：https://www.samanthaming.com/tidbits/76-converting-object-to-array/

import React, {useEffect, useState} from 'react';
import {View, Text, FlatList} from 'react-native';

import data from './data.json';

const App = () => {
  const [filteredItems, setFilteredItems] = useState([]);
  const [categories, setCategories] = useState();

  useEffect(() => {
    setFilteredItems([]);
    setCategories(Object.keys(data['Top Rated']));
  }, []);

  useEffect(() => {
    if (categories) {
      categories.map(category => {
        setFilteredItems(prevState => [
          ...prevState,
          Object.values(
            data['Top Rated'][`${category}`].map(item => `${item.Title}\n`),
          ),
        ]);
      });
    }
  }, [categories]);

  return (
    <View style={{flex: 1}}>
      <FlatList
        data={filteredItems}
        renderItem={({item}) => <Text>{`${item}\n`}</Text>}
      />
    </View>
  );
};

export default App;

如何从 json 文件中读取数据并使用它在 React Native 的视图组件中显示？

How to read data from json file and use it to show in view component in react native?

javascript

json

react-native

react-native-flatlist

react-hooks