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