我可能在这里错过了一些非常简单的东西,但我无法让我的代码正常运行。我正在尝试为每个referenceList
显示嵌套的无referenceListItems
列表。我想的主要问题是如何将状态变量referenceListItems
传递到子组件ReferenceListItems
?
const ReferencePage = () => (
<div>
<h1>Reference</h1>
<Reference />
</div>
);
class ReferenceBase extends Component {
constructor(props) {
super(props);
this.state = {
loading: false,
referenceLists: [],
referenceListItems: [],
};
}
componentDidMount() {
this.onListenForReferenceLists();
this.onListenForReferenceListItems();
}
onListenForReferenceLists() {
this.setState({ loading: true });
this.unsubscribeReferenceLists = this.props.firebase
.referenceLists()
.onSnapshot(snapshot => {
if (snapshot.size) {
let referenceLists = [];
snapshot.forEach(doc =>
referenceLists.push({ ...doc.data(), uid: doc.id }),
);
this.setState({
referenceLists: referenceLists,
loading: false
});
} else {
this.setState({ referenceLists: null, loading: false });
}
});
}
onListenForReferenceListItems() {
this.unsubscribeReferenceListsItems = this.props.firebase
.referenceListItems()
.onSnapshot(snapshot => {
if (snapshot.size) {
let referenceListItems = [];
snapshot.forEach(doc =>
referenceListItems.push({ ...doc.data(), uid: doc.id }),
);
this.setState({
referenceListItems: referenceListItems,
loading: false
});
} else {
this.setState({ referenceListItems: null, loading: false });
}
});
}
componentWillUnmount() {
this.unsubscribeReferenceLists();
this.unsubscribeReferenceListsItems();
}
render() {
const { referenceLists, referenceListItems, loading } = this.state;
return (
<div>
{loading && <div>Loading ...</div>}
{referenceLists ? (
<ReferenceLists referenceLists={referenceLists} />
):(
<div>There are no reference items ...</div>
)}
</div>
);
}
}
const Reference = withFirebase(ReferenceBase);
const ReferenceLists = ({ referenceLists }) => (
<ul className="reference-lists">
{referenceLists.map( referenceList => (
<ReferenceList key={referenceList.uid} referenceList={referenceList} />
))}
</ul>
);
const ReferenceList = ({ referenceList }) => (
<li className="reference">
<strong>{referenceList.userId}</strong> {referenceList.name}
<ReferenceListItems />
</li>
);
const ReferenceListItems =({ referenceListItems }) => (
<ul className="reference-list-items">
{referenceListItems.map( referenceListItem => (
<ReferenceListItem key={referenceListItem.uid} referenceListItem={referenceListItem} />
))}
</ul>
);
const ReferenceListItem = ({ referenceListItem }) => (
<li className="reference-list-item">
<strong>{referenceListItem.userId}</strong> {referenceListItem.name}
</li>
);
您不会在父组件ReferenceBase
组件中显式使用ReferenceListItems
。因此,您只需将其作为属性传递到整个组件树中即可。
render() {
const { referenceLists, referenceListItems, loading } = this.state;
return (
<div>
{loading && <div>Loading ...</div>}
{referenceLists ? (
<ReferenceLists referenceLists={referenceLists} referenceListItems={referenceListItems} />
):(
<div>There are no reference items ...</div>
)}
</div>
);
参考列表
const ReferenceLists = ({ referenceLists, referenceListItems }) => (
<ul className="reference-lists">
{referenceLists.map( referenceList => (
<ReferenceList key={referenceList.uid} referenceList={referenceList} referenceListItems={referenceListItems} />
))}
</ul>
参考列表
const ReferenceList = ({ referenceList, referenceListItems }) => (
<li className="reference">
<strong>{referenceList.userId}</strong> {referenceList.name}
<ReferenceListItems referenceListItems={referenceListItems}/>
</li>
);
通过重新声明 referenceList
let referenceLists = [];
它永远不会在你的类中设置。 你要么需要在闭包中返回 referenceLists,要么在你的回调中设置类级变量
this.referenceLists.push({ ...doc.data(), uid: doc.id })