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

Posted 2023-02-19

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

【英文标题】：Error: StateProvider(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, 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。

【参考方案1】：

您在这里缺少返回语句：

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

【讨论】：

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