Así que este es un componente que tengo en React JS
const EnterSetData = ({ user_card_set }) => { const [cardlist, setCardlist] = useState({ data: [] }); let setlist= useGetSetDB(); //Save and reset form const sendSets = () => { const dupes = findDuplicates(setlist, cardlist); if (dupes.length > 0) { saveSets(setlist) setCardlist({ data: [] }); } else { handleDupes(dupes); } }; useEffect(() => { setCardlist(card_set); }, [card_set]); return ( <> {cardlist.data.map((card, key) => ( <a> .......</a>))} <button type="button" onClick={sendSets} > Save Cards </button> </div> El problema principal es que mientras se guardan los datos, hay un error importante. useGetSetDB() se usa para obtener la lista de conjuntos completa de una API. Después de guardar, uso setCardlist para actualizar el estado del componente. Es aquí donde noto que la setlist no cambia. Las nuevas entradas no están allí y esto hace que findDuplicates falle. Mi base de datos busca duplicados y, por lo tanto, console.logs mostrará que las inserciones fallaron. ¿Cómo obligo a useGetSetDB a actualizar en cada cambio de estado? Esto es useGetSetDB
const useGetSetDB = () => { const[state,setState] = useState([]); const fetchData = async () => { const data = await fetch("/sets"); const res = await data.json(); return res; }; useEffect(()=>{ fetchData().then(response => {setState(response)}) },[]) return state } export default useGetSetDB;Puede pasar la lista de tarjetas para useGetSetDB cardlist a continuación
const [cardlist, setCardlist] = useState({ data: [] }); let setlist = useGetSetDB(cardlist); //whenever cardlist gets updated, we trigger side-effect again También necesita modificar useGetSetDB para alinearse con el cambio de estado
const useGetSetDB = (cardlist) => { const[state,setState] = useState([]); const fetchData = async () => { const data = await fetch("/sets"); const res = await data.json(); return res; }; useEffect(()=>{ fetchData().then(response => {setState(response)}) }, [cardlist]) //add `cardlist` to dependency list return state } export default useGetSetDB;