[英]React showing a blank screen without any error messages (context api used)
我正在構建一個 React Amazon 克隆,所以為了讓用戶能夠將產品添加到他的購物籃中(作為所有未來結帳系統的第一個版本),我使用 Context Api 來管理它。
當我編寫完 Context Api 代碼並將其添加到index.js
文件中以便我可以訪問數據時,我得到了一個完全沒有錯誤消息的空白屏幕。 我不知道問題到底出在哪里。
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)
減速器.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;
index.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>
)
看起來您正在為錯誤的組件提供道具。 在index.js
中試試這個:
...
<StateProvider reducer={reducer} initialValue={initialState}>
<App />
</StateProvider>
...
另請注意我如何將道具重命名為initialValue
,因為這是您的StateProvider
所期望的。
您忘記在 StateProvider 函數中添加 return
export const StateProvider = ({reducer , initialValue, children}) => {
return (
<StateContext.Provider value={useReducer(reducer, initialValue)}>
{children}
</StateContext.Provider>
)}
export const useStateValue = () => useContext(StateContext)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.