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

【问题标题】：Error: StateProvider(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null错误：StateProvider(...)：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null
【发布时间】：2021-05-15 10:53:52
【问题描述】：

我有这个错误 Error: StateProvider(...): Nothing was returned from render.这通常意味着缺少 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;

而我的减速机是这样的

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);

【问题讨论】：

您好！正如错误所说，StateProvider 中缺少return。该函数没有返回语句。
你能告诉我我需要在哪一行放置 return 语句，因为我尝试使用 return 语句，但它说 error as Unexpected token。

标签： javascript html reactjs redux react-hooks

【解决方案1】：

您在这里缺少返回语句：

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

【讨论】：

它的工作。感谢您提供解决方案。