Как в React правильно вывести данные из Json?

Question

[Александр]

Чтобы я не делал, вылетает ошибка "TypeError: _client2.default.map is not a function".
Все никак не пойму как с Json вытаскивать данные.
Пожалуйста, напишите пример как из Json получить данные?

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {select2} from '../actions/index';
import data from '../reducers/client2.json';

class ClientsList extends Component {
  showList(){


    {data.map( function (item, index) {
      return (<li key={index}>{item.general.firstName}   </li>    );} )
    }



    return this.props.clients.map ((client) =>{
      return(
        <li onClick={() => this.props.select (client)}
        key={client.general.firstName}>{client.general.firstName} </li>
      );
    });
  }
  render (){

    return (

      <ol>
        {this.showList()}
      </ol>
    );
  }
}

function mapStateToProps (state){
  return {
    clients: state.clients
  };
}

function matchDispatchToProps (dispatch){
  return bindActionCreators({select2: select2}, dispatch)
}

export default connect(mapStateToProps, matchDispatchToProps)(ClientsList);

[
  {
    "general": {
      "firstName": "Liana",
      "lastName": "Crooks",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/kevinoh/128.jpg"
    },
    "job": {
      "company": "Ledner, Johnson and Predovic",
      "title": "Investor Functionality Coordinator"
    },
    "contact": {
      "email": "[e-mail]",
      "phone": "[phone]"
    },
    "address": {
      "street": "1520 Zemlak Cove",
      "city": "New Devon",
      "zipCode": "42586-7898",
      "country": "Guinea-Bissau"
    }
  },
 {
    "general": {
      "firstName": "Liana",
      "lastName": "Crooks",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/kevinoh/128.jpg"
    },
    "job": {
      "company": "Ledner, Johnson and Predovic",
      "title": "Investor Functionality Coordinator"
    },
    "contact": {
      "email": "[e-mail]",
      "phone": "[phone]"
    },
    "address": {
      "street": "1520 Zemlak Cove",
      "city": "New Devon",
      "zipCode": "42586-7898",
      "country": "Guinea-Bissau"
    }
  }
]

Comments

[Антон Спирин]

Какие версии библиотек используете?

[Александр]

Только библиотеки реакт
import React from 'react';
import ReactDOM from "react-dom";
import {Provider} from 'react-redux';
import {createStore} from 'redux';

[Антон Спирин]

Jokerzv, webpack какой версии? Какой конфиг?

[Александр]

Антон Спирин,

{
  "name": "redux",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "webpack",
    "start": "webpack-dev-server"
  },
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-register": "^6.9.0",
    "cross-env": "^1.0.8",
    "css-loader": "^0.23.1",
    "expect": "^1.20.1",
    "node-libs-browser": "^1.0.0",
    "node-sass": "^3.8.0",
    "react": "^15.1.0",
    "react-addons-test-utils": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2",
    "redux-logger": "^2.6.1",
    "redux-promise": "^0.5.3",
    "redux-thunk": "^2.1.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-hot-middleware": "^2.11.0"
  },
  "devDependencies": {
    "babel-plugin-react-transform": "^2.0.2",
    "babel-preset-stage-0": "^6.5.0",
    "react-transform-hmr": "^1.0.4",
    "webpack": "^1.15.0"
  }
}

Конфиг:

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

module.exports = {
    devServer: {
        inline: true,
        contentBase: './src',
        port: 3000
    },
    devtool: 'cheap-module-eval-source-map',
    entry: './code/js/index.js',
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['babel'],
                exclude: /node_modules/
            },
            {
                test: /\.scss/,
                loader: 'style-loader!css-loader!sass-loader'
            }
        ]
    },
    output: {
        path: 'src',
        filename: 'js/bundle.min.js'
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin()
    ]
};

[Антон Спирин]

Jokerzv, где вы это взяли? Из древнего репозитория скопировали? webpack уже давно как четвертый вышел, он из коробки поддерживает json. Лучше удалить проект и начать новый с актуальными версиями библиотек.
Можете если не умеете писать конфиги create-react-app попробовать, ну или статью поискать 2018 года. Хотя в документации webpack все доступно описано на примерах.

Проблему текущего проекта можно решить добавлением json-loader, но работать со старыми библиотеками так себе путь. Не советую

[Александр]

Антон Спирин, Спасибо! Уже скачиваю 4 версию. Можете привести пример с json-loader ?

[Антон Спирин]

Jokerzv, он со второй версии не нужен. Будет работать из коробки.

[Александр]

Антон Спирин, Написал Вам на почту