Webブラウザを更新するとFirebaseデータが機能しない

bugfix> javascript > 投稿

読んでくれてありがとう。

React、Redux、Firebaseに問題があります。 Reduxを使用してReactストアでFirebaseデータを設定します。コンポーネントでmapStateToPropsを使用してデータを渡します。 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);

アクション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

回答 2 件

  • あなたは完全な答えをあなたに提供するのに十分な情報を誰にも提供していない。

    考慮すべきいくつかのポイント：

    props.match.params.slug の価値  持ってる？これを親コンポーネントから適切に伝えていますか？

    あなたは startSetPosts() を呼んでいますか 、おそらくコンテナコンポーネントの componentWillMount()  方法？

    コンテナコンポーネントがレンダリングされる時点で、ストア内の状態を記録しようとしましたか？これは間違いなく、問題が発生している場所をデバッグするのに役立ちます。

  • こんにちはチャールズごめんなさい、私は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: 
   }
}

あなたの答え

関連記事