將JSON文件加載到React Component狀態| Wepback2

Question

我一直試圖導入一個本地JSON文件到我的反應組件狀態一段時間現在，無論我有多少谷歌和嘗試 - 我似乎無法得到它的工作。這裏是我的JSON文件：

{ 
    "products": [ 
    {"id": 1, "category": "paint", "name": "clowd", "type": "matt emulsion", "stocked": true, "size": "100x130", "thumbnail": "23-sm.png", "previewImg": "23.png"}, 
    {"id": 2, "category": "paint", "name": "dålig sikt", "type": "matt emulsion/olja/akryl", "stocked": true, "size": "100x130", "thumbnail": "24-sm.png", "previewImg": "24.png"}, 

    {"id": 25, "category": "print", "name": "MIMI | 2nd edition", "type": "akvarellppr, 70x100", "limited": "30", "available": "28", "price": "3,000", "stocked": true, "thumbnail": "mimisecond-sm.jpg", "previewImg": "mimisecond.jpg"}, 
    {"id": 26, "category": "print", "name": "max", "type": "uppspänd canvas, 95x120", "limited": "30", "available": "28", "price": "7,000", "stocked": true, "thumbnail": "max-sm.jpg", "previewImg": "max.jpg"}, 

    {"id": 38, "category": "places", "stocked": true, "desc": "Vernisage Strössel @ Linnégatan, sthlm 2015", "thumbnail": "17.png", "previewImg": "17.png"}, 
    {"id": 39, "category": "places", "stocked": true, "desc": "Max @ Nybergsgatan, sthlm 2016", "thumbnail": "26.png", "previewImg": "26.png"} 
    ] 
} 

這裏是我的反應成分：

import React, { Component } from 'react'; 

import data from 'data.json'; 
console.log(data); 

// Component import 
import Menu from './components/menu'; 
import Footer from './components/footer'; 
import ProductContainer from './components/productContainer'; 
import CategoryContainer from './components/categoryContainer'; 

class Archive extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     products: data, 
     category: "" 
    }; 
    this.filterHandler = this.filterHandler.bind(this); 
    } 

    // Set component state to the currently clicked "cat" (CategoryItem) 
    filterHandler(tag){ 
    this.setState({ 
     category: tag 
    }) 
    } 

    render() { 
    // 1. Render CategoryContainer with props products and filterHandler function to show all uniqe CategoryItems and filter products based on category 
    // 2. Render ProductContainer based on category. If this.state.category.length is true - filter "prod" & where prod.categories is same type and name as this.state.category : else render all this.state.categories that matches "paint". 
    return (
     <div> 
     <Menu /> 
     <div className="archive-container"> 
      <div className="archive-wrapper"> 
      <CategoryContainer 
       filterHandler={this.filterHandler} 
       products={this.state.products} 
      /> 
      <br/><br/> 
      <ProductContainer 
       products={this.state.category.length 
       ? this.state.products.filter((prod) => prod.category === this.state.category) 
       : this.state.products.filter((prod) => prod.category === 'paint') 
       } 
      /> 
      </div> 
     </div> 
     <Footer /> 
     </div> 
    ); 
    }; 
}; 

export default Archive; 

這裏是我的webpack2文件：

// DEVELOPMENT 

const webpack = require('webpack'); 
const path = require('path'); 

const entry = [ 
    'webpack-dev-server/client?http://localhost:8080', // bundle the client for webpack-dev-server and connect to the provided endpoint 
    'webpack/hot/only-dev-server', // bundle the client for hot reloading only- means to only hot reload for successful updates 
    './app.js' 
] 

const output = { 
    path: path.join(__dirname, 'dist'), 
    publicPath: '/dist', 
    filename: 'bundle.min.js' 
} 

const plugins = [ 
    new webpack.HotModuleReplacementPlugin(), // enable HMR globally 
    new webpack.NamedModulesPlugin() // prints more readable module names in the browser console on HMR updates 
] 

const config = { 
    context: path.join(__dirname, 'src'), 
    entry: entry, 
    output: output, 
    devtool: "inline-source-map", 
    module: { 
    rules: [ 
      { 
       test: /\.(js|jsx)$/, 
       exclude: /node_modules/, 
       include: path.join(__dirname, 'src'), 
       use: { 
        loader: "babel-loader" 
       } 
      }, 
      { 
       test: /\.(png|jpg|gif)$/, 
       use: [{ 
       loader: 'url-loader', 
      options: { limit: 10000, name: './images/[name].[ext]' } 
       }] 
      }, 
      { 
       test: /\.(sass|scss)$/, 
       use: [ 
        'style-loader', 
        'css-loader', 
        'sass-loader' 
       ] 
      } 
     ] 
    }, 
    plugins: plugins, 
    externals: { 
     jquery: 'jQuery' 
    } 
} 

module.exports = config 

我得到的錯誤：

如果我將json文件更改爲javascript對象並直接輸入進入構造函數：

constructor(props){ 
    super(props); 
    this.state = { 
     products: [ 
     {id: 1, category: 'paint', name: 'clowd', type: 'matt emulsion', stocked: true, size: '100x130', thumbnail: '23-sm.png', previewImg: "23.png"}, 
     {id: 2, category: 'paint', name: 'dålig sikt', type: 'matt emulsion/olja/akryl', stocked: true, size: '100x130', thumbnail: '24-sm.png', previewImg: "24.png"}, 
     {id: 3, category: 'paint', name: 'dålig sikt', type: 'matt emulsion/olja/akryl', stocked: true, size: '100x130', thumbnail: '25-sm.png', previewImg: "25.png"}, 
     {id: 4, category: 'paint', name: 'pink', type: 'matt emulsion', stocked: true, size: '100x130', thumbnail: '1-sm.png', previewImg: "1.png"}, 
     {id: 5, category: 'paint', name: 'pink', type: 'matt emulsion', stocked: true, size: '100x130', thumbnail: '27-sm.png', previewImg: "27.png"}, 
     {id: 6, category: 'paint', name: 'pinks', type: 'matt emulsion', stocked: true, size: '100x130', thumbnail: '2-sm.png', previewImg: "2.png"} 
     ], 
     category: "" 
    } 
    this.filterHandler = this.filterHandler.bind(this); 
    } 

然後它工作正常。但我希望它在一個單獨的json文件中，因此它不會是捆綁的，因此客戶端將項目添加到列表中會更容易。

也許有一個更聰明的方法來做到這一點，我是新的反應和webpack，並希望學習..偉大的任何形式的輸入。謝謝！

Answer 1

（如果有人來解決這個問題？問題的評論是修復了常見的錯誤，而進口在webpack 2json文件）

你Archive.state樣子：

{ 
    products: { products: [ (your rest of array) ] }, 
    category: "" 
} 

你的錯誤是

this.state = { 
    products: data, 
    category: "" 
}; 

應該是：

this.state = { 
    products: data.products, 
    category: "" 
};