Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

A PAGINA FICA EM BRANCO

Referente ao curso React: praticando React com Js, no capítulo Definindo contextos e atividade Hook personalizado

por Santiago Oliveira Cunha
| 68.5k xp | 29 posts

Uncaught Error: Objects are not valid as a React child (found: object with keys {map, forEach, count, toArray, only}). If you meant to render a collection of children, use an array instead. at throwOnInvalidObjectType (react-dom.development.js:14887:1) at reconcileChildFibers (react-dom.development.js:15828:1) at reconcileChildren (react-dom.development.js:19167:1) at updateContextProvider (react-dom.development.js:21154:1) at beginWork (react-dom.development.js:21649:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at beginWork$1 (react-dom.development.js:27451:1) at performUnitOfWork (react-dom.development.js:26557:1) throwOnInvalidObjectType @ react-dom.development.js:14887 reconcileChildFibers @ react-dom.development.js:15828 reconcileChildren @ react-dom.development.js:19167 updateContextProvider @ react-dom.development.js:21154 beginWork @ react-dom.development.js:21649 callCallback @ react-dom.development.js:4164 invokeGuardedCallbackDev @ react-dom.development.js:4213 invokeGuardedCallback @ react-dom.development.js:4277 beginWork$1 @ react-dom.development.js:27451 performUnitOfWork @ react-dom.development.js:26557 workLoopSync @ react-dom.development.js:26466 renderRootSync @ react-dom.development.js:26434 performConcurrentWorkOnRoot @ react-dom.development.js:25738 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 react-dom.development.js:14887 Uncaught Error: Objects are not valid as a React child (found: object with keys {map, forEach, count, toArray, only}). If you meant to render a collection of children, use an array instead. at throwOnInvalidObjectType (react-dom.development.js:14887:1) at reconcileChildFibers (react-dom.development.js:15828:1) at reconcileChildren (react-dom.development.js:19167:1) at updateContextProvider (react-dom.development.js:21154:1) at beginWork (react-dom.development.js:21649:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at beginWork$1 (react-dom.development.js:27451:1) at performUnitOfWork (react-dom.development.js:26557:1) throwOnInvalidObjectType @ react-dom.development.js:14887 reconcileChildFibers @ react-dom.development.js:15828 reconcileChildren @ react-dom.development.js:19167 updateContextProvider @ react-dom.development.js:21154 beginWork @ react-dom.development.js:21649 callCallback @ react-dom.development.js:4164 invokeGuardedCallbackDev @ react-dom.development.js:4213 invokeGuardedCallback @ react-dom.development.js:4277 beginWork$1 @ react-dom.development.js:27451 performUnitOfWork @ react-dom.development.js:26557 workLoopSync @ react-dom.development.js:26466 renderRootSync @ react-dom.development.js:26434 recoverFromConcurrentError @ react-dom.development.js:25850 performConcurrentWorkOnRoot @ react-dom.development.js:25750 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 react-dom.development.js:18687 The above error occurred in the <Favoritos.Provider> component:

at FavoritosProvider (http://localhost:3000/static/js/bundle.js:117:3)
at Router (http://localhost:3000/static/js/bundle.js:40973:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:39074:5)
at AppRoutes

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:18687 update.callback @ react-dom.development.js:18720 callCallback @ react-dom.development.js:13923 commitUpdateQueue @ react-dom.development.js:13944 commitLayoutEffectOnFiber @ react-dom.development.js:23391 commitLayoutMountEffects_complete @ react-dom.development.js:24688 commitLayoutEffects_begin @ react-dom.development.js:24674 commitLayoutEffects @ react-dom.development.js:24612 commitRootImpl @ react-dom.development.js:26823 commitRoot @ react-dom.development.js:26682 finishConcurrentRender @ react-dom.development.js:25892 performConcurrentWorkOnRoot @ react-dom.development.js:25809 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 react-dom.development.js:14887 Uncaught Error: Objects are not valid as a React child (found: object with keys {map, forEach, count, toArray, only}). If you meant to render a collection of children, use an array instead.

3 respostas
por Santiago Oliveira Cunha
| 68.5k xp | 29 posts
import { Children, createContext, useContext, useState } from "react";

export const FavoritosContext = createContext();
FavoritosContext.displayName = "Favoritos";

export default function FavoritosProvider({ children }){
    const [favorito, setFavorito] = useState([]);
    return(
        <FavoritosContext.Provider
        value={{favorito,setFavorito}}>
            {Children}
        </FavoritosContext.Provider>
    )
}

export function useFavoritoContext(){
    const { favorito, setFavorito } = useContext(FavoritosContext);

    function adicionarFavorito(novoFavorito) {
        const favoritoRepetido = favorito.some(item => item.id === novoFavorito.id)

        let novaLista = [...favorito];

        if(!favoritoRepetido) {
            novaLista.push(novoFavorito);
            return setFavorito(novaLista);
        }

        novaLista.slice(novaLista.indexOf(novoFavorito), 1);
        return setFavorito(novaLista);
    }
    return {
        favorito,
        adicionarFavorito
    }
}
por Santiago Oliveira Cunha
| 68.5k xp | 29 posts
import FavoritosProvider from "Contextos/Favoritos";
import Cabecalho from "componentes/Cabecalho";
import Rodape from "componentes/rodape";
import Inicio from "pages/Inicio";
import Favoritos from "pages/favoritos";
import { BrowserRouter, Route, Routes } from "react-router-dom";

export default function AppRoutes(){
    return(
        <BrowserRouter>
            <Cabecalho/>
                <FavoritosProvider>
                    <Routes>
                        <Route path="/" element={<Inicio/>}/>
                        <Route path="/Favoritos" element={<Favoritos/>}/>
                    </Routes>
                </FavoritosProvider>
            <Rodape/>
        </BrowserRouter>
    )
}
solução!
por Santiago Oliveira Cunha
| 68.5k xp | 29 posts

Consegui arrumar era erro de sintaxe no children, bom dia só ter mais atenção mesmo, curso show