为什么函数 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);
答案 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}) =>
(未定义)删除花括号以访问传递给此组件的所有props
:const 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);