json - 将 JSON 文件加载到 React 组件状态 |韦伯克2

Question

我已经尝试将本地 JSON 文件导入到我的 react 组件状态有一段时间了，无论我如何谷歌和尝试 - 我似乎无法让它工作。这是我的 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"}
  ]
}

这是我的 react 组件:

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 文件中，这样它就不会捆绑，这样客户端就可以更轻松地将项目添加到列表中。

也许有一种更聪明的方法可以做到这一点，我是 React 和 Webpack 的新手，希望学习......非常适合任何形式的输入。谢谢!

Answer 1

(如果有人来解决这个问题......问题评论中修复了在 webpack 2 中导入 json 文件时的常见错误)

您的Archive.state 如下所示:

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

你的错误是

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

应该是:

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