刷新网络浏览器时Firebase数据不起作用答案

【问题标题】：Firebase data not working when refresh web browser刷新网络浏览器时Firebase数据不起作用
【发布时间】：2018-05-25 09:06:25
【问题描述】：

感谢阅读。

我对 React、Redux 和 Firebase 有疑问。我使用 Redux 在 React 存储中设置了 Firebase 数据。在组件中使用 mapStateToProps 传递数据。当我链接到一个 firebase 项目并刷新数据的网络浏览器道具时，未定义。我希望在刷新浏览器时保留 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);

操作 Redux 文件

export const setPosts = posts => ({
  type: "SET_POSTS",
  posts
});

export const startSetPosts = () => {
  return dispatch => {
    return database
      .ref("posts")
      .once("value")
      .then(snapshot => {
        const posts = [];

        snapshot.forEach(childSnapshot => {
          posts.push({
            id: childSnapshot.key,
            ...childSnapshot.val()
          });
        });

        dispatch(setPosts(posts));
      });
  };
};

和存储文件

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;
};

【问题讨论】：

标签： javascript reactjs firebase firebase-realtime-database redux

【解决方案1】：

您确实没有提供足够的信息让任何人为您提供完整的答案。

需要考虑的几点：

props.match.params.slug 有什么价值？您是否将其从父组件适当地传递下来？
您是否在调用startSetPosts()，可能是在您的容器组件的componentWillMount() 方法中？
您是否尝试过在渲染容器组件时记录存储中的状态？这无疑会帮助您调试问题所在。

【讨论】：

【解决方案2】：

嗨，Charles，对不起，我从 React 和 Firebase 开始，我的英语不好。我像这样在我的 App.js 中调度 startSetPosts()。

const jsx = (
  <Provider store={store}>
    <AppRouter />
  </Provider>
);

store.dispatch(startSetPosts());


ReactDOM.render(jsx, document.getElementById("app"));

关于 props.match.params.slug 我使用 mapStateToProps() 从父组件传递值。

const mapStateToProps = state => ({
  posts: selectCategory(state.posts, state.filters),
  filters: state.filters.category
});

我使用这种结构从 firebase 获取数据：

posts{
  -LDCSkdmgh2F3FjmcoSp{
       description:
       image:
       slug:
       title: 
   }
}

【讨论】：