为什么我不能在 ReactJS 中从我的 JSON 文件中检索数据？答案

【问题标题】：Why can't I retrieve data from my JSON file in ReactJS?为什么我不能在 ReactJS 中从我的 JSON 文件中检索数据？
【发布时间】：2020-12-12 12:59:33
【问题描述】：

我有一个 JSON 文件（名为 Journey0.json），我在其中存储数据，如下所示。

{
"title": "journy title",
"date": "2020",
"homepageImage": "/images/journey1/TravelCardImage",
"introStory": "text",
"introMap": "",
"destinations": [
    {
        "destinationTitle": "Berlijn",
        "destinationStory": "destination story",
        "destinationPreviewImage": "/images/journey1/prague.jpg",
        "destinationImages": [
            {
                "original": "/images/journey1/HomeHeader.jpg",
                "thumbnail": "/images/journey1/HomeHeader.jpg"
            },
            {
                "original": "/images/journey1/HomeHeader.jpg",
                "thumbnail": "/images/journey1/HomeHeader.jpg"
            },
            {
                "original": "/images/journey1/HomeHeader.jpg",
                "thumbnail": "/images/journey1/HomeHeader.jpg"
            },
           ]
       }
   ]
 }

然后我在另一个文件（即 .jsx）中创建一个包含所有类似 JSON 文件的数组，如下所示：

import * as journey0 from './journey0.json'

export const allJourneysArray = [
    journey0
]

export default allJourneysArray;

我尝试访问如下所示的数据，但由于某种原因，这些值仍未定义。我做错了什么？

import JourneyCard from '../journeyCard/JourneyCard';
import allJourneysArray from '../../../journeys/allJourneys';

class HomePageBody extends Component {
    render() {

        let journeyCards = [];

        for (var x in allJourneysArray) {
            journeyCards.push(
                <Link style={this.styles.link} to={'/' + x}>
                    <JourneyCard
                        title={allJourneysArray[x].title}
                        date={allJourneysArray[x].date}
                        homepageImage={allJourneysArray[x].homepageImage}/>
                </Link>
            )
        }

        return(
            <div style={this.styles.container}>
                <div style={this.styles.cardContainer}>
                    {journeyCards}
                </div>
            </div>
        );
    }

【问题讨论】：

标签： javascript arrays json reactjs

【解决方案1】：

尝试： import journey0 from './journey0.json'

【讨论】：

这需要我在所有我想使用数据的地方导入每个新的旅程文件（journey1.json、journey2.json 等）。有更好的方法吗？