React-native Flatlist 没有列出我的 json 本地文件

Question

我在 Board.js 中的 Flatlist 遇到了一个问题，它不显示位于文件 BoardData.js 中的 json 数据的内容。

但是我已经 console.log 导入了 BoardData 并且似乎 json 很好。但是当我开始通过平面列表读取一些数据时。数据未定义。

查看我的 BoardData.js 文件：

var BoardData = [

    {
        "id":"1",
        "status": "declared",
        "date": "03-DEC-2019",
        "category": "Fuite d'eau",
        "event_info": "Contact du Plombier",
        "adress": "2 rue de la queuleuleu, 31200 Toulouse",
        "imageUrl": "..data/photo/photo_123456.webp"
    },
    {

        "id":"2",
        "status": "run",
        "date": "12-JAN-2020",
        "category": "eclairage",
        "event_info": "Contact du Plombier",
        "adress": "3 impasse alphonse-daudet, 31700 Blagnac",
        "imageUrl": "../data/photo/photo_234459.jpg"
    },
     {
        "id":"3",
        "status": "declared",
        "date": "20-FEB-2020",
        "category": "chaussee",
        "event_info": "Contact du Plombier",
        "adress": "50 avenue de Fronton, 31140 Aucamville",
        "imageUrl": "../data/photo/photo_458049.jpg"
    },

    {
        "id":"4",
        "status": "closed",
        "date": "04-DEC-2019",
        "category": "Poubelle",
        "event_info": "Contact du Plombier",
        "adress": "3 rue de la queuleuleu, 31200 Toulouse",
        "imageUrl": "../data/photo/photo_123456.webp"
    },

    {
        "id":"5",
        "status": "closed",
        "date": "13-JAN-2020",
        "category": "Ascenceur",
        "event_info": "Contact du Plombier",
        "adress": "4 impasse alphonse-daudet, 31700 Blagnac",
        "imageUrl": "../data/photo/photo_234459.jpg"
    },

    {
        "id":"6",
        "status": "run",
        "date": "21-FEB-2020",
        "category": "chaussee",
        "event_info": "Contact du Plombier",
        "adress": "52 avenue de Fronton, 31140 Aucamville",
        "imageUrl": "../data/photo/photo_458049.jpg"
    },

];

module.exports = BoardData;

然后查看我的代码以呈现我的 FlatList：

import React, { Component } from 'react';
import {
    FlatList, ScrollView, StyleSheet, Platform, View, Image, Dimensions, TouchableOpacity,
  } from 'react-native';

import {Card, CardItem, Left, Right, Thumbnail, Title, Subtitle} from 'native-base';

import BoardData from '../data/BoardData.js'



console.log ('BoardData : ', BoardData)

export default class BoardScreen extends Component {
    constructor(){

        super();
        this.state = {
            boarderstatus: 'declared',
            myCases: [],

        }

    }

    componentDidMount () {
        this.setState({myCases:BoardData })

    }

    // Synchronization concerning the gesture
    async setBoarder(value){

        console.log("SETBoarder value : " + value)
        this.setState({boarderstatus:value })
        console.log("SETBoarder boarderstatus : " + value)


    }



    renderCard(item,index){
if (item.category === this.state.boarderstatus)
        {
            return (

                <TouchableOpacity styles={style.btn}>

                <Card>
                    <CardItem>
                        <Left>
                            <Thumbnail 

                            source={require('../data/photo/photo_234459.jpg')}
                            style={{width:80,height:80}}/>
                            <Block left style={{top:-15, left:5}}>
                                <Title>{item.category}</Title>
                                <Subtitle>{item.date}</Subtitle>
                            </Block>

                        </Left>

                        <Right>
                            <Block>

                            </Block>
                        </Right>
                    </CardItem>

                </Card>

                </TouchableOpacity>

            );
        }


    }
    render() {
        return (
            ...

                    <FlatList
                        data={BoardData}
                        keyExtractor={(item)=>item.id}
                        renderItem={(item, index) => this.renderCard(item, index)}
                    />



        );
    }
}

Answer 1

好的修复：

这里只是将 BoardData json 对象实例化到 BoardData 是代码：

<FlatList data={BoardData.BoardData}
          keyExtractor={(item)=>item.id}
          renderItem={(item, index) => this.renderCard(item, index)}/>