反应显示空白屏幕，没有任何错误消息（使用的上下文API）

Question

我正在构建一个React Amazon Clone，因此为了使用户能够将产品添加到他的篮子中（作为将来所有结帐系统的第一个版本），我使用上下文API来管理它。

当我完成编写上下文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)

reducer.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>

)

Answer 1

看起来您正在为错误的组件提供道具。
在index.js中尝试此操作：

...

<StateProvider reducer={reducer} initialValue={initialState}>
  <App />
</StateProvider>

...

另外，请注意我如何将prop重命名为initialValue，因为这是您的state> state> state -provider所期望的。

Answer 2

您忘了在您的stateprovider函数中添加返回

    export const StateProvider = ({reducer , initialValue, children}) => {
return (
 <StateContext.Provider value={useReducer(reducer, initialValue)}>
        {children}
    </StateContext.Provider>
)}
export const useStateValue = () => useContext(StateContext)

Answer 3

您必须更改箭头es6 {} =＆gt; （）因为{}需要返回

export const StateProvider = ({reducer , initialValue, children}) => (
    <StateContext.Provider value={useReducer(reducer, initialValue)}>
        {children}
    </StateContext.Provider>
);