Estoy creando un clon de Amazon de reacción, por lo que para darle al usuario la posibilidad de agregar un producto a su cesta (como la primera versión de todo el futuro sistema de pago), he usado Context Api para administrar esto.
Cuando terminé de escribir el código de Context Api y lo agregué al archivo index.js para poder acceder a los datos, obtuve una pantalla en blanco sin ningún mensaje de error. No se donde esta exactamente el problema.
StateProvider.js
import React , { createContext, useContext, useReducer} from 'react' export const StateContext = createContext(); export const StateProvider = ({reducer , initialValue, children}) => { <StateContext.Provider value={useReducer(reducer, initialValue)}> {children} </StateContext.Provider> }; export const useStateValue = () => useContext(StateContext)reductor.js
export const initialState = { basket: [], }; const reducer = (state, action) => { switch(action.type) { case "ADD_TO_BASKET": return{ ...state, basket: [...state.basket, ...action.item] }; default: return state; }; }; export default reducer;índice.js
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import { StateProvider } from './Special_components/StateProvider'; import reducer, { initialState } from './Special_components/reducer'; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <StateProvider reducer={reducer} initialState={initialState} > <App /> </StateProvider> </React.StrictMode> )Parece que está proporcionando accesorios al componente equivocado. Prueba esto en index.js :
... <StateProvider reducer={reducer} initialValue={initialState}> <App /> </StateProvider> ... También tenga en cuenta cómo cambié el nombre de la propiedad a initialValue porque eso es lo que espera su StateProvider .
Olvidó agregar retorno en su función StateProvider
export const StateProvider = ({reducer , initialValue, children}) => { return ( <StateContext.Provider value={useReducer(reducer, initialValue)}> {children} </StateContext.Provider> )} export const useStateValue = () => useContext(StateContext)