reactjsプロジェクトでJavascriptマップメソッドが機能しません

Question

私は全く反応しておらず、チュートリアルに従っています。このチュートリアルでは、私は、ユーザーlist.jsと呼ばれる次のコンポーネントがあります。

：

import React, {Component} from 'react'; 
import {bindActionCreators} from 'redux'; 
import {connect} from 'react-redux'; 

class UserList extends Component { 

    createListItems() { 
    return this.props.users.map((user) => { 
    return (
     <li>{user.first}</li> 
    ); 
    }); 
} 

render() { 
    return (
    <ul> 
     {this.createListItems()} 
    </ul> 
    ); 
} 
} 

function mapStateToProps(state) { 

    return { 
    users: state.users 
    }; 

} 

export default connect(mapStateToProps)(UserList); 

そしてここでは、私の減速-users.js

export default function() { 
    return [ 
    { 
     id: 1, 
     first: 'Bucky', 
     last: 'Roberts', 
     age: 71, 
     description: 'Bucky is a React developer anbd Youtuber', 
     thumbnail: 'http://i.imgur.com/7yUvePI.jpg' 
    }, 
    { 
     id: 2, 
     first: 'Joby', 
     last: 'Wasilenko', 
     age: 27, 
     description: 'Joby loves the Packers, cheese and turtles', 
     thumbnail: 'http://i.imgur.com/52xRlm8.jpg' 
    }, 
    { 
     id: 3, 
     first: 'Madison', 
     last: 'Williams', 
     age: 24, 
     description: 'Madi likes her dog but it is really annoying.', 
     thumbnail: 'http://i.imgur.com/4EMtxHB.jpg' 
    } 
    ] 
} 

そして今、私は、コンソールにエラーを取得していますです

Uncaught TypeError: Cannot read property 'map' of undefined

私が間違っていることを理解していない、私はマップ関数を削除し、他のデータを返し、それはデータをマップしようとするとき以外は正常に動作します。

Answer 1

ReactコンポーネントのES6構文を使用する場合、コンストラクタ関数では、クラスに定義したカスタムbethodをバインドする必要があります。

は、あなたのUserList定義

constructor(props) { 
    super(props); 
    this.createListItems = this.createListItems.bind(this); 
} 

に以下を追加し、あなたが行くように良いことがあります。これをしたくない場合は、コンポーネントクラスを作成するためのReact.createClass（{}）メソッドに戻すこともできます。

Answer 2

コードが正常に動作するには、このようなコードが必要です。

// user reducer file 

const initialState = [ 
    { 
    id: 1, 
    first: 'Bucky', 
    last: 'Roberts', 
    age: 71, 
    description: 'Bucky is a React developer anbd Youtuber', 
    thumbnail: 'http://i.imgur.com/7yUvePI.jpg' 
    }, 
    { 
    id: 2, 
    first: 'Joby', 
    last: 'Wasilenko', 
    age: 27, 
    description: 'Joby loves the Packers, cheese and turtles', 
    thumbnail: 'http://i.imgur.com/52xRlm8.jpg' 
    }, 
    { 
    id: 3, 
    first: 'Madison', 
    last: 'Williams', 
    age: 24, 
    description: 'Madi likes her dog but it is really annoying.', 
    thumbnail: 'http://i.imgur.com/4EMtxHB.jpg' 
    } 
]; 

export default function usersReducer(state, action) { 
    return state; 
} 

// root reducer file 

import { combineReducers } from 'redux'; 
import usersReducer from 'your path to users reducer file' 

export default function rootReducer() { 
    return combineReducers({ 
    users: usersReducer, 
    }); 
} 

// store file 

import { createStore } from 'redux'; 
import rootReducer from 'path to root reducer file'; 

const store = createStore(rootReducer()); 

export default store;