如何解决从Firebase继续反应组件状态
我有一个简单的购物网站,数据来自无头CMS系统。我正在使用nextJS / React构建站点。当用户将商品添加到购物车时,我想使用Firebase保持状态,因为用户浏览了不同的页面。但是,当用户导航到其他页面时,状态和firebase都丢失了。主要问题是我无法将初始购物车状态设置为Firebase数据。如何解决此问题,以便可以使用Firebase数据保持购物车状态?
import React,{ useState,useEffect } from 'react';
import Layout from './../components/Layout';
import contextCart from './../components/contextCart';
import firebase from '../data/firestore';
export default function MyApp({ Component,pageProps }) {
//any way to set the initial cart state to data from firebase???
const [ cart,setCart ] = useState([]);
const addToCart = (product) => {
setCart((prevCartState) => {
return [ ...prevCartState,product ];
});
firebase.database().ref().set(cart);
};
//componentDidUpdate => listen for cart changes and update the localStorage
useEffect(
() => {
firebase.database().ref().set(cart);
},[ cart ]
);
//componentDidMount => run the effect only once and run cleanup code on unmount
useEffect(() => {
//effect code
firebase.database().ref().once('value').then(function(snapshot) {
setCart(snapshot.val() || []);
});
//returned function will be called on component unmount aka cleanup code
//return () => { /*any cleanup code*/ };
},[]);
return (
<contextCart.Provider value={{ cart: cart,addToCart: addToCart }}>
<Layout>
<Component {...pageProps} />
</Layout>
</contextCart.Provider>
);
}
解决方法
数据没有更新,因为您没有在听代码中的更改。
您可以指定一次在useEffect
挂钩中获取数据,该挂钩仅在初始加载时运行。
要听更改,您可以这样实现:
var starCountRef = firebase.database().ref('posts/' + postId + '/starCount');
starCountRef.on('value',function(snapshot) {
updateStarCount(postElement,snapshot.val());
});
在以下官方Firebase文档中了解有关此内容的更多信息:https://firebase.google.com/docs/database/web/read-and-write
我建议您使用状态管理库,例如Redux甚至是React本身的Context API。 原因是Firebase向您收取数据库流量的费用(对于Firestore数据库,这比实时数据库要大得多,但仍然需要考虑成本)。 使用状态库,您可以检查是否需要从Firebase提取数据,或者是否已经在状态中拥有所需的数据。 另外,如果您可以使用提供者模式来拆分代码,则可以在应用程序增长时更轻松地维护逻辑。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。