TypeError：無法讀取Redux中未定義的屬性「地圖」

雖然學習React與Redux只是試圖渲染一些用戶的詳細信息。TypeError：無法讀取Redux中未定義的屬性「地圖」

獲取典型錯誤TypeError: Cannot read property 'map'。我可以理解，mapStateToProps方法中的state.users是undefined。嘗試使用constructor來設置初始狀態。但沒有運氣。我錯過了一些微不足道的東西嗎？誤差上返回this.props.users.map（（用戶）=> {線createListItems（）方法。

容器\ userList.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) => { // here is the error 
      return (
       <li key={user.id}> 
        {user.firstName} {user.lastName} 
       </li> 
      ); 
     } ); 
} 

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

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

export default connect(mapStateToProps)(UserList);

減速器\ userReducers.js

export default function() { 
return [ 
    { 
     id: 1, 
     firstName: "sally", 
     lastName: "brown", 
     age: 12, 
     location: "lund" 

    }, 
    { 
     id: 2, 
     firstName: "Terance", 
     lastName: "Smith", 
     age: 23, 
     location: "London" 

    }, 
    { 
     id: 3, 
     firstName: "Petter", 
     lastName: "Phantom", 
     age: 34, 
     location: "Manchester" 

    } 
] 
}

減速器\ index.js

import { combineReducers } from 'redux'; 
import UserReducers from './userReducers'; 

const allReducers = combineReducers({ 
    users: UserReducers 
}); 

export default allReducers;

的src \ index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 
import App from './components/app'; 
import registerServiceWorker from './registerServiceWorker'; 

import { createStore } from 'redux'; 
import allReducers from './reducers/userReducers'; 
import { Provider } from 'react-redux'; 


let store = createStore(allReducers); 

ReactDOM.render(
    <Provider store={store}> 
     <App /> 
    </Provider> 
, document.getElementById('root')); 
registerServiceWorker();

來源

2017-09-11 shaz

這是所有的代碼還是你爲了簡潔而留下了一些東西？我沒有看到你的減速器實際上在商店中設置狀態。 – sma

您不會調度任何操作來設置「用戶」狀態。可以預先加載redux狀態，也可以派發一個動作，以用戶狀態更新該狀態。 –

這是迄今爲止我所有的代碼。我還沒有使用過任何「行動」。沒有調度一個Action，直到我開始使用Action才能加載狀態？ – shaz

的問題是，reducer無法將狀態設置爲store因此state.users是undefined。

錯誤的進口是在爲變量allReducers做的src \ index.js文件。

不正確

src\index.js 
... 
import allReducers from './reducers/userReducers';

正確

src\index.js 
... 
import allReducers from './reducers/index';

來源

2017-09-11 19:56:40 shaz

我建議修改你正在建設的減速了一下的方式，具體如下：

// reducers/users.js 

const ADD_USER = 'add.user' 

const USERS = [{ 
    id: 1, 
    firstName: "sally", 
    lastName: "brown", 
    age: 12, 
    location: "lund" 
}, { 
    id: 2, 
    firstName: "Terance", 
    lastName: "Smith", 
    age: 23, 
    location: "London" 
}, { 
    id: 3, 
    firstName: "Petter", 
    lastName: "Phantom", 
    age: 34, 
    location: "Manchester" 
}] 

export default (state = USERS, action) => { 
    switch (action.type) { 
    case ADD_USER: 
     return [...state, action.user] 
    default: 
     return state 
    } 
}

我增加了ADD_USER位表明爲什麼這種格式有價值。它允許您簡單地添加其他操作，並且相應地自動更新狀態管理。而你更自由一點，開始有更多的行動擴展它 -

// store.js 

import { combineReducers, createStore } from 'redux' 
import users from './reducers/users.js' 

export default createStore(
    combineReducers({ users }), 
    {} // Initial State 
)

現在，你的店應該正確與你有約束力的工作。

來源

2017-09-12 00:20:46

TypeError：無法讀取Redux中未定義的屬性「地圖」

回答

相關問題