Question

在使用React学习Redux时，只是尝试渲染一些用户详细信息。

获取典型错误TypeError: Cannot read property 'map'。我可以理解state.users方法中的mapStateToProps是undefined。尝试使用constructor设置初始状态。但没有运气。我错过了一些微不足道的事情吗？错误在返回this.props.users.map（（user）=＆gt; { 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();

Answer 1

问题是reducer无法将状态设置为store，因此state.users为undefined。

src \ index.js 文件中的变量 allReducers 导入错误。

<强>不正确

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

<强>正确

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

Answer 2

我建议稍微修改你的减速器的构建方式，如下所示：

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

现在，您的商店应该能够正确使用您拥有的绑定 - 并且您可以通过其他操作开始扩展它。您可以更自由地开始扩展它。

TypeError：无法读取属性＆＃39; map＆＃39;在Redux

2 个答案: