如何從react.js中的文件訪問數據

Question

我現在有點卡住。 我正在嘗試將數據加載到我的一個組件中並將其傳遞給另一個組件。 但是，我無法訪問數據。 我收到以下錯誤：

TypeError：data.map不是函數

我相信將其保存到我的const數據中時無法正確訪問導入的數據（從'../src/data/data'導入數據）

這是我的組件List.js目前的樣子：

import React, { Component } from 'react'
import Article from './Article'
require ('../src/sass/List.scss');
import data from '../src/data/data'

class List extends Component {

  render() {

    const data = {data}
    const listWebsites = data.map(websites => {

        return (
            <Article key={websites.id} name={websites.name} preview={websites.description} image={websites.image} />
            )
    })

    console.log('our data is:', this.props.data)
    return (
      <div className="wrapperList">
          {listWebsites}

        </div>
    )
  }

}

export default List

這是我的數據文件：

const data = [
  {
    'id': '1',
    'name': 'Skyscanner',
    'description': 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr ',
    'image': 'skyscanner.png',

  },
  {
    'id': '2',
    'name': 'Momondo',
    'description': 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr  ',
    'image': 'monondo.jpg',

  },
  {
    'id': '3',
    'name': 'Skypicker',
    'description': 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr ',
    'image': 'Skypicker.jpg',

  },
  {
    'id': '4',
    'name': 'Atob',
    'description': 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr  ',
    'image': 'Atob.jpg',

  },
   {
    'id': '5',
    'name': 'flipper',
    'description': 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr ',
    'image': 'flipper.jpg',

  },

];

export default data;

您能幫我解決這個問題，並告訴我如何正確訪問數據嗎？ 非常感謝

Answer 1

您將默認導出數據，在這種情況下，該數據基本上與

export default [
  {
    'id': '1',
    'name': 'Skyscanner',
    'description': 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr ',
    'image': 'skyscanner.png',

  }, ....
];

因此，您可以正常導入而不必擔心將變量名設置為什么。

import data from '../src/data'