Map function 在 class 组件反应原生

Question

我是 React 的新手，我正在尝试遍历 json 文件，想通过使用 map function 来呈现对象。但是它不显示对象。 有人可以告诉我我做错了吗？ 提前致谢。

这是我的代码：

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import stations from './test.json';



export default class Playlist extends Component {
    constructor(props) {
        super(props);
        this.state = {
            allStations: [stations],

        };

    }



    render() {
        return (

            <View>
                {this.state.allStations.map((item, index) => (
                    (
                        <View>
                            <Text>{item.firstName}</Text>
                        </View>
                    )
                ))}

            </View>




        )
    }
}

这是我的 json 文件：

[{
    "firstName": "Joe",
    "lastName": "Jackson",
    "gender": "male",
    "age": 28

   
 },
 {
    "firstName": "Brad",
    "lastName": "Brown",
    "gender": "male",
    "age": 45
   
   
 }
]

Answer 1

我是 React 新手，我正在尝试遍历 json 文件，想使用 map function 来渲染对象。 但是它不显示对象。 有人可以告诉我想要我做错了吗？ 提前致谢。

这是我的代码：

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import stations from './test.json';



export default class Playlist extends Component {
    constructor(props) {
        super(props);
        this.state = {
            allStations: [stations],

        };

    }



    render() {
        return (

            <View>
                {this.state.allStations.map((item, index) => (
                    (
                        <View>
                            <Text>{item.firstName}</Text>
                        </View>
                    )
                ))}

            </View>




        )
    }
}

这是我的 json 文件：

[{
    "firstName": "Joe",
    "lastName": "Jackson",
    "gender": "male",
    "age": 28

   
 },
 {
    "firstName": "Brad",
    "lastName": "Brown",
    "gender": "male",
    "age": 45
   
   
 }
]

Answer 2

在资产文件夹中添加“test.json”文件并将其分配给 index.js 文件，因此当您有更多文件时，您可以将它们添加到资产下并从一个位置导出它们

看看这段代码，谢谢

有关如何使用 map() 的更多信息 function https://www.pluralsight.com/guides/how-to-use-the-map()-function-to-export-javascript-in-react