为什么mapStateToProps在React / Redux中返回“未定义”

时间:2018-07-03 09:34:52

标签: reactjs redux

为什么函数 mapStateToProps 在React / Redux中返回“未定义”或空对象。

我的代码:

import React from 'react'
import {connect} from "react-redux";

export const ArticleComponent = ({props}) => (
<div>
    <h1>Hello {console.log(props)}</h1>
</div>
);

const mapStateToProps = (state) => {
  return {
    text: '11111'
  }
};

export default connect(mapStateToProps)(ArticleComponent);

4 个答案:

答案 0 :(得分:0)

为了正确接收道具,您需要使用组件的连接实例。由于连接的组件是default import,因此将其作为default export导入。

import ArticleComponent from 'path/to/ArticleComponent'

答案 1 :(得分:0)

我不明白你为什么要从道具中提取道具。

代替

export const ArticleComponent = ({props})

const ArticleComponent = (props)

答案 2 :(得分:0)

您不能像这样使用const,它将永远无法使用。以及为什么要返回文本值(这仅仅是为了测试它)?

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

class ArticleComponent extends Component {
render() {
const {text} = this.props
return (
<div>
    <h1>Hello {console.log(text)}</h1>
</div>
)
}
}


const mapStateToProps = (state) => {
  return {
    text: '11111'
  }
};

ArticleComponent = connect(mapStateToProps)(ArticleComponent);

export default  ArticleComponent;

答案 3 :(得分:0)

您在代码中犯了多个错误:


  • 导出初始组件,然后默认导出到连接的组件。

删除初始组件上的导出,并使用以下命令导入默认导出:

import ArticleComponent from "./ArticleComponent" // No curly braces{ } to import the default;

  • 您通过执行props.props来访问const ArticleComponent = ({props}) =>(未定义)

删除花括号以访问传递给此组件的所有propsconst ArticleComponent = (props) =>(或使用花括号仅获取{text}道具)


  • 您在控制台中记录了道具(这不是错误,但我认为这不是故意的)

显示如下状态:<h1>Hello {props.text}</h1>


这是完整的代码:

import React from 'react'
import {connect} from "react-redux";

const ArticleComponent = ({text}) => ( // or (props)
<div>
    <h1>Hello {text}</h1> // or {props.text}
</div>
);

const mapStateToProps = (state) => {
  return {
    text: '11111'
  }
};

export default connect(mapStateToProps)(ArticleComponent);