簡體   English   中英

反應顯示沒有任何錯誤消息的空白屏幕(使用上下文 api)

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM