组件呈现自身时未调用mapStateToProps

Question

我有一个Node组件，它使用相同的Node函数呈现其子级。出于某种原因，mapStateToProps方法只对第一个节点调用，而不对其任何子节点调用。

import * as React from "react";
import { View } from "react-native";
import { connect } from "react-redux";
function Node({ node, nodeId }) {    
return (
<View>
{node.children.map((id) => (<Node key={id} nodeId={id} />))}
</View>
);
}
const mapStateToProps = (state, ownProps) => {    
// This log is not called for children
console.log(ownProps.nodeId, "Mapping state to props");
return {
node: state.nodes[ownProps.nodeId],
};
};
export default connect(mapStateToProps)(Node);

我能让它工作的唯一方法是在另一个文件中创建一个NodeB组件(如果它不是从其他文件导入的，则不起作用(，以渲染Node。像这样：

export function NodeB(props) {
return <Node {...props} />;
}

问题是我收到了一个Require cycle警告，因为NodeB导入Node，Node导入NodeB。。。。

知道为什么会发生这种事吗？

Answer 1

这是因为默认情况下，子Node组件没有连接到redux存储。要修复此问题，请尝试以下操作：

import * as React from "react";
import { View } from "react-native";
import { connect } from "react-redux";
function Node({ node, nodeId }) {    
return (
<View>
{node.children.map((id) => <ConnectedNode key={id} nodeId={id} />)}
</View>
);
}
const mapStateToProps = (state, ownProps) => { ... };
const ConnectedNode = connect(mapStateToProps)(Node);
export default ConnectedNode;