Cada vez que se carga mi página, ejecuto la función useEffect() a continuación para recuperar datos de firebase y configurarlos en mi lista de calendarList de estado local, pero cada vez que la página muestra, hace un duplicado de los datos y los empuja al estado, así que tengo el doble objetos almacenados. ¿Cómo puedo evitar que esto suceda?
ESTADO
const [calendarList, setCalendarList] = useState([]);USAR EFECTO: se ejecuta al cargar la página
useEffect(() => { db.collection("users") .doc(userId) .collection("calendars") .onSnapshot((snapshot) => { const calendarArray = []; snapshot.forEach((doc) => { calendarArray.push(doc.data()); push all doc obejects to calendar array }); setCalendarList(calendarArray); //set state }); }, []);puede crear un gancho personalizado, tal vez.
cree un nuevo archivo y llámelo como desee, pero los gurús dicen que debe comenzar con el uso
//useCalendar.js import {useState, useEffect} from "react"; const useCalendar = (userId) => { const [calendarList, setCalendarList] = useState([]); const addItem = (item) => { // use this to add mow items }; const cleanList = () => { setCalendarList([]); } const getItemById = (id) => { // use this to get an item }; useEffect(()=> { db.collection("users") .doc(userId) .collection("calendars") .onSnapshot(snapshot => { const calendarArray = snapshot && snapshot.map(doc => doc.data()); setCalendarList(calendarArray || []); }); },[userId, list]); return { calendarList, addItem, cleanList, getItemById }; } export default useCalendar;ahora en tu componente úsalo como
const component = () => { const { calendarList, addItem, cleanList, getItemById } = useCalendar(userId); ... }