Javascript 刷新web浏览器时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

谢谢你的阅读

我对React、Redux和Firebase有问题。我使用Redux在React store中设置Firebase数据。在组件中使用MapStateTops传递数据。当我链接firebase项目并刷新web浏览器时,数据的道具未定义。我希望在刷新浏览器时保留firebase数据

这是我显示firebase数据的组件

 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()
  • 您是否尝试过在呈现容器组件时记录存储中的状态?这无疑将帮助您调试出哪里出了问题

嗨,查尔斯,对不起,我从React和Firebase开始,我的英语不好。我在App.js中发送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: 
   }
}