与 mapStateToProps 一起使用时，“无法读取未定义的属性‘地图’"

本文介绍了与 mapStateToProps 一起使用时，“无法读取未定义的属性‘地图’"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试在我的 react/redux 功能组件中显示我的状态(用户):

const Dumb = ({ users }) =>{console.log('用户', 用户)返回 (<div><ul>{users.map(user => <li>user</li>)}

)}const 数据 = 状态 =>({用户:状态})连接(数据，空)(哑)

Dumb 用于容器组件中.users.map 语句有问题，但我认为数据是通过 connect 语句注入的?reducer 有一个初始状态，其中包含 1 个名称:

const users = (state = ['Jack'], action) =>{开关(动作.类型){案例'RECEIVED_DATA':返回 action.data默认:返回状态}}

CodeSandbox

解决方案

渲染时您没有使用连接的组件，因此组件中的 props 不可用

const ConnectedDumb = connect(数据，空值)(哑的);类容器扩展 React.Component {使成为() {返回 (<div><ConnectedDumb/>

);}}

工作演示

I am trying to display my state (users) in my react/redux functional component:

const Dumb = ({ users }) => { console.log('users', users) return ( <div> <ul> {users.map(user => <li>user</li>)} </ul> </div> ) } const data = state => ({ users: state }) connect(data, null)(Dumb)

Dumb is used in a container component. The users.map statement has an issue but I thought that the data was injected through the connect statement? the reducer has an initial state with 1 name in it:

const users = (state = ['Jack'], action) => { switch (action.type) { case 'RECEIVED_DATA': return action.data default: return state } }

CodeSandbox

解决方案

You aren't using the connected component while rendering and hence the props aren't available in the component

const ConnectedDumb = connect( data, null )(Dumb); class Container extends React.Component { render() { return ( <div> <ConnectedDumb /> </div> ); } }

Working demo