読んでくれてありがとう。
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;
};
回答 2 件
こんにちはチャールズごめんなさい、私は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: } }
関連記事
- Firebaseサインアウトがフラッターアプリケーションで機能しない
- Firefoxでマウスボタン4/5(ブラウザ戻る/ブラウザ進む)を機能させる方法は?
- React Nativeのスクロールして更新すると、ページネーションが正しく機能しません
- FirebaseRealtimeデータベースパスが機能していません
- ページを更新するとJavaScriptが機能しなくなります
- containsValue()がFlutterのFirebaseのDocumentSnapshotで機能しない
- Firebase'add 'データを既存のドキュメントに追加しても機能しない
- Firebase Firestore:ページを更新した後でも、フィールドにデータを1回追加します
関連した質問
- Firebaseコードは100%正しいですが、状態はまだnullです(React)
- 要素のクリック時に、あるコンポーネントから別のコンポーネントにIDを渡す方法
- レンダリングされたコメントと重複する新しいコメントを追加する
- 別のメソッドの問題は、firebaseメソッドがreactjsを終了する前に実行されます
- TypeError:setEmailは関数onChangeではありません
- Uberはスクロール矢印付きのタイプHorizontalScrollSpyを食べます
- Reactjs:他のコンポーネントアイテムからツールバーの状態にアクセスする
- JavaScriptを使用したスライドショーを使用したReactJSの画像モーダル
- Reactjs無限スクロールコンポーネントは常に新しいデータをレンダリングします
- NextJsはサーバー側のレンダリングを介してFacebookタグをレンダリングします
あなたは完全な答えをあなたに提供するのに十分な情報を誰にも提供していない。
考慮すべきいくつかのポイント:
props.match.params.slug
の価値 持ってる?これを親コンポーネントから適切に伝えていますか?あなたは
startSetPosts()
を呼んでいますか 、おそらくコンテナコンポーネントのcomponentWillMount()
方法?コンテナコンポーネントがレンダリングされる時点で、ストア内の状態を記録しようとしましたか?これは間違いなく、問題が発生している場所をデバッグするのに役立ちます。