Javascript 刷新web浏览器时Firebase数据不工作
谢谢你的阅读 我对React、Redux和Firebase有问题。我使用Redux在React store中设置Firebase数据。在组件中使用MapStateTops传递数据。当我链接firebase项目并刷新web浏览器时,数据的道具未定义。我希望在刷新浏览器时保留firebase数据 这是我显示firebase数据的组件Javascript 刷新web浏览器时Firebase数据不工作,javascript,reactjs,firebase,firebase-realtime-database,redux,Javascript,Reactjs,Firebase,Firebase Realtime Database,Redux,谢谢你的阅读 我对React、Redux和Firebase有问题。我使用Redux在React store中设置Firebase数据。在组件中使用MapStateTops传递数据。当我链接firebase项目并刷新web浏览器时,数据的道具未定义。我希望在刷新浏览器时保留firebase数据 这是我显示firebase数据的组件 render() { return ( <div> <div className="content-contai
render() {
return (
<div>
<div className="content-container">
<Header />
<div className="square-top" />
<div className="square" />
<div className="middle-square" />
<div className="box-content" style={{ marginTop: "20rem" }}>
<img
className="img-post"
src={this.props.posts.image}
alt=""
/>
<h1>{this.props.posts.title}</h1>
<p>{this.props.posts.description}</p>
</div>
<div className="box-content" style={{ paddingBottom: "400px" }}>
<button
onClick={() => {
this.props.history.push("/blog");
}}
className="btn-primary"
>
Volver
</button>
</div>
</div>
<Footer />
</div>
);
}
}
const mapStateToProps = (state, props) => {
return {
posts: state.posts.find(post => post.slug === props.match.params.slug)
};
};
export default connect(mapStateToProps)(PostItemPage);
并存储文件
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
export default () => {
const store = createStore(
combineReducers({
filters: filtersReducer,
questions: questionsReducer,
posts: postsReducer
}),
composeEnhancers(applyMiddleware(thunk))
);
return store;
};
你还没有提供足够的信息让任何人给你一个完整的答案 需要考虑的几点:
props.match.params.slug的值是多少?您是否从父组件适当地传递此信息
- 您是否在调用容器组件的
方法中的componentWillMount()
startSetPosts()
- 您是否尝试过在呈现容器组件时记录存储中的状态?这无疑将帮助您调试出哪里出了问题
const jsx = (
<Provider store={store}>
<AppRouter />
</Provider>
);
store.dispatch(startSetPosts());
ReactDOM.render(jsx, document.getElementById("app"));
我使用以下结构从firebase获取数据:
posts{
-LDCSkdmgh2F3FjmcoSp{
description:
image:
slug:
title:
}
}
const mapStateToProps = state => ({
posts: selectCategory(state.posts, state.filters),
filters: state.filters.category
});
posts{
-LDCSkdmgh2F3FjmcoSp{
description:
image:
slug:
title:
}
}