Question

我有这个错误 错误：StateProvider(...)：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null。由于这一部分，它即将到来。我正在处理我的项目并使用 react 和 redux。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { StateProvider } from './StateProvider';
import { reducer, initialState } from './reducer';

ReactDOM.render(
  <React.StrictMode>
    <StateProvider initialState={initialState} reducer={reducer}>
       <App />
    </StateProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

我的应用程序是这样的

import './App.css';
import Header from "./Header";
import Home from "./Home";
import Checkout from "./Checkout";
import {BrowserRouter as Router, Switch} from "react-router-dom";

function App() {
  return (
    <Router>
       <div className="app">
         <Header/>
         <Switch>
            <Router path="/checkout">
               <Checkout/>
            </Router>
            <Router path="/">
               <Home/>
            </Router>
         </Switch>
       </div>
    </Router>
  );
}

export default App;

我的reducer就是这样

const initialState = {
    basket : [],
};

const reducer = (state, action) => {
     
    switch(action.type){
        case "ADD_TO_BASKET": 
          return{
            ...state,
              basket: [...state, action.item],
          };

        default:
            return state;
    }
};

export  {reducer, initialState};

A我的 stateProvider 是这样的

import React, { createContext, useContext, useReducer } from "react";


export const StateContext = createContext();


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


export const useStateValue = () => useContext(StateContext);

Answer 1

您在这里缺少 return 语句：

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

错误：StateProvider(...)：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null

1 个答案: