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

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

類型錯誤：data.map不是一個函數

我相信，我不是訪問導入的數據（從「../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;

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

來源

2016-11-03 zbkrt

你絕對不想在這裏做'const data = {data}'。你能告訴我們'../src/data/data'嗎？另外，你爲什麼不把道具作爲道具來傳遞？ –

那麼我首先通過我的App.js將數據傳遞給這個競爭者，但是我想改變這個是因爲與路由相關的問題，並在List.js中立即訪問數據。我還添加了我的數據文件。 – zbkrt

也許你應該解決這個「路由相關問題」，否則當數據變得可變時你會遇到其他問題。到目前爲止，錯誤指向'const data = {data}'。不要這樣做，這個問題應該消失。 –

您導出您的數據爲默認值在這種情況下是基本相同

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

    }, .... 
];

正因爲如此，就可以正常而不用擔心您設置的變量名導入。

import data from '../src/data'

來源

2016-11-04 00:16:01

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

回答

相關問題