Laden der JSON-Datei in React Component state | Wepback2

Question

Ich habe versucht, eine lokale JSON-Datei in meine reagieren Komponenten Zustand für eine Weile jetzt und egal, wie viel ich google und versuchen - ich kann nicht scheinen, es zur Arbeit zu bekommen. Hier ist meine JSON-Datei:

{ 
    "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"} 
    ] 
} 

Hier ist meine reagieren Komponente:

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; 

Hier ist meine webpack2 Datei:

// 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 

ich den Fehler:

Wenn ich die JSON-Datei zu einem Javascript-Objekt ändere und direkt eingab in den Erbauer:

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); 
    } 

Dann funktioniert es gut. Aber ich möchte es in einer separaten JSON-Datei, so wird es nicht gebündelt sein und so wird es einfacher für den Client, Elemente zur Liste hinzuzufügen.

Vielleicht gibt es eine klügere Möglichkeit, dies zu tun, ich bin neu zu reagieren und Webpack und hoffe zu lernen .. Großartig für jede Form der Eingabe. Vielen Dank!

Answer 1

(wenn jemand kommt, um dieses Problem beheben ... in den Kommentaren der Frage sind Korrekturen zu häufigen Fehlern während json Datei in webpack 2 Import)

Ihre Archive.state wie folgt aussieht:

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

Ihr Fehler

ist

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

Sollte sein:

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