与 mapStateToProps 一起使用时，“无法读取未定义的属性‘地图’" [英] 'Cannot read property 'map' of undefined' when using connect with 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

这篇关于与 mapStateToProps 一起使用时，“无法读取未定义的属性‘地图’"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！