Reactjs TypeError:在使用React上下文和React路由器时，render不是函数

我需要设置一个可以从不同组件调用的用户状态。此设置使用React路由器和React上下文。 React上下文只包含一个跟踪用户名的状态

在顶级即应用程序中，我已将所有子项传递给提供商。但我犯了个错误

TypeError:渲染不是函数

我的用户上下文代码：

const UserContext = createContext();

export const UserProvider = (props) => {
  const [user, setUser] = useState("");
  return (
    <UserContext.Provider value={[user, setUser]}>
      {props.children}
    </UserContext.Provider>
  );
};

export default UserContext;

function App() {
  return (
    <UserProvider>
      <Router>
        <div>
          <Nav />
          <Switch>
            <Route exact path="/" component={Signup} />
            <Route exact path="/signin" component={SignIn} />
            <Route path="/register" component={UserRegister} />
            <Route path="/homepage/:user" component={Homepage} />
          </Switch>
        </div>
      </Router>
    </UserProvider>
  );
}

export default App;

const UserContext=createContext（）；
导出常量UserProvider=（道具）=>{
const[user，setUser]=useState（“”）；
返回(
{props.children}
);
};
导出默认用户上下文；

我的应用程序代码：

const UserContext = createContext();

export const UserProvider = (props) => {
  const [user, setUser] = useState("");
  return (
    <UserContext.Provider value={[user, setUser]}>
      {props.children}
    </UserContext.Provider>
  );
};

export default UserContext;

function App() {
  return (
    <UserProvider>
      <Router>
        <div>
          <Nav />
          <Switch>
            <Route exact path="/" component={Signup} />
            <Route exact path="/signin" component={SignIn} />
            <Route path="/register" component={UserRegister} />
            <Route path="/homepage/:user" component={Homepage} />
          </Switch>
        </div>
      </Router>
    </UserProvider>
  );
}

export default App;

函数应用程序（）{
返回(
);
}
导出默认应用程序；

entrie错误日志：

TypeError: render is not a function
updateContextConsumer
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:18747
  18744 | {
  18745 |   ReactCurrentOwner$1.current = workInProgress;
  18746 |   setIsRendering(true);
> 18747 |   newChildren = render(newValue);
        | ^  18748 |   setIsRendering(false);
  18749 | } // React DevTools reads this flag.
  18750 | 
View compiled
beginWork
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:19114
  19111 |   return updateContextProvider(current, workInProgress, renderLanes);
  19112 | 
  19113 | case ContextConsumer:
> 19114 |   return updateContextConsumer(current, workInProgress, renderLanes);
        | ^  19115 | 
  19116 | case MemoComponent:
  19117 |   {
View compiled
HTMLUnknownElement.callCallback
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:3945
  3942 | function callCallback() {
  3943 |   didCall = true;
  3944 |   restoreAfterDispatch();
> 3945 |   func.apply(context, funcArgs);
       | ^  3946 |   didError = false;
  3947 | } // Create a global error event handler. We use this to capture the value
  3948 | // that was thrown. It's possible that this error handler will fire more
View compiled
invokeGuardedCallbackDev
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:3994
  3991 | // errors, it will trigger our global error handler.
  3992 | 
  3993 | evt.initEvent(evtType, false, false);
> 3994 | fakeNode.dispatchEvent(evt);
       | ^  3995 | 
  3996 | if (windowEventDescriptor) {
  3997 |   Object.defineProperty(window, 'event', windowEventDescriptor);
View compiled
invokeGuardedCallback
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:4056
  4053 | function invokeGuardedCallback(name, func, context, a, b, c, d, e, f) {
  4054 |   hasError = false;
  4055 |   caughtError = null;
> 4056 |   invokeGuardedCallbackImpl$1.apply(reporter, arguments);
  4057 | }
  4058 | /**
  4059 |  * Same as invokeGuardedCallback, but instead of returning an error, it stores
View compiled
beginWork$1
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:23964
  23961 | } // Run beginWork again.
  23962 | 
  23963 | 
> 23964 | invokeGuardedCallback(null, beginWork, null, current, unitOfWork, lanes);
        | ^  23965 | 
  23966 | if (hasCaughtError()) {
  23967 |   var replayError = clearCaughtError(); // `invokeGuardedCallback` sometimes sets an expando `_suppressLogging`.
View compiled
performUnitOfWork
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:22776
  22773 | 
  22774 | if ( (unitOfWork.mode & ProfileMode) !== NoMode) {
  22775 |   startProfilerTimer(unitOfWork);
> 22776 |   next = beginWork$1(current, unitOfWork, subtreeRenderLanes);
        | ^  22777 |   stopProfilerTimerIfRunningAndRecordDelta(unitOfWork, true);
  22778 | } else {
  22779 |   next = beginWork$1(current, unitOfWork, subtreeRenderLanes);
View compiled
workLoopSync
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:22707
  22704 | function workLoopSync() {
  22705 |   // Already timed out, so perform work without checking if we need to yield.
  22706 |   while (workInProgress !== null) {
> 22707 |     performUnitOfWork(workInProgress);
  22708 |   }
  22709 | }
  22710 | 
View compiled
renderRootSync
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:22670
  22667 | 
  22668 | do {
  22669 |   try {
> 22670 |     workLoopSync();
        | ^  22671 |     break;
  22672 |   } catch (thrownValue) {
  22673 |     handleError(root, thrownValue);
View compiled
performSyncWorkOnRoot
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:22293
  22290 |   }
  22291 | } else {
  22292 |   lanes = getNextLanes(root, NoLanes);
> 22293 |   exitStatus = renderRootSync(root, lanes);
        | ^  22294 | }
  22295 | 
  22296 | if (root.tag !== LegacyRoot && exitStatus === RootErrored) {
View compiled
scheduleUpdateOnFiber
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:21881
  21878 |   // root inside of batchedUpdates should be synchronous, but layout updates
  21879 |   // should be deferred until the end of the batch.
  21880 | 
> 21881 |   performSyncWorkOnRoot(root);
        | ^  21882 | } else {
  21883 |   ensureRootIsScheduled(root, eventTime);
  21884 |   schedulePendingInteractions(root, lane);
View compiled
updateContainer
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:25482
  25479 |   }
  25480 | 
  25481 |   enqueueUpdate(current$1, update);
> 25482 |   scheduleUpdateOnFiber(current$1, lane, eventTime);
  25483 |   return lane;
  25484 | }
  25485 | function getPublicRootInstance(container) {
View compiled
(anonymous function)
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:26021
  26018 | 
  26019 | 
  26020 |   unbatchedUpdates(function () {
> 26021 |     updateContainer(children, fiberRoot, parentComponent, callback);
        | ^  26022 |   });
  26023 | } else {
  26024 |   fiberRoot = root._internalRoot;
View compiled
unbatchedUpdates
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:22431
  22428 | executionContext |= LegacyUnbatchedContext;
  22429 | 
  22430 | try {
> 22431 |   return fn(a);
        | ^  22432 | } finally {
  22433 |   executionContext = prevExecutionContext;
  22434 | 
View compiled
legacyRenderSubtreeIntoContainer
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:26020
  26017 |   } // Initial mount should not be batched.
  26018 | 
  26019 | 
> 26020 |   unbatchedUpdates(function () {
        | ^  26021 |     updateContainer(children, fiberRoot, parentComponent, callback);
  26022 |   });
  26023 | } else {
View compiled
render
G:/WebDevelopmentFolder/trinkerrchallenge/node_modules/react-dom/cjs/react-dom.development.js:26103
  26100 |     }
  26101 |   }
  26102 | 
> 26103 |   return legacyRenderSubtreeIntoContainer(null, element, container, false, callback);
  26104 | }
  26105 | function unstable_renderSubtreeIntoContainer(parentComponent, element, containerNode, callback) {
  26106 |   if (!isValidContainer(containerNode)) {
View compiled
Module.<anonymous>
G:/WebDevelopmentFolder/trinkerrchallenge/src/index.js:6
  3 | import "./index.css";
  4 | import App from "./App";
  5 | 
> 6 | ReactDOM.render(
  7 |   <React.StrictMode>
  8 |     <App />
  9 |   </React.StrictMode>,
View compiled
Module../src/index.js
http://localhost:3000/static/js/main.chunk.js:1581:30
__webpack_require__
G:/WebDevelopmentFolder/trinkerrchallenge/webpack/bootstrap:851
  848 | 
  849 | __webpack_require__.$Refresh$.init();
  850 | try {
> 851 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  852 | } finally {
  853 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  854 | }
View compiled
fn
G:/WebDevelopmentFolder/trinkerrchallenge/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
1
http://localhost:3000/static/js/main.chunk.js:1595:18
__webpack_require__
G:/WebDevelopmentFolder/trinkerrchallenge/webpack/bootstrap:851
  848 | 
  849 | __webpack_require__.$Refresh$.init();
  850 | try {
> 851 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  852 | } finally {
  853 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  854 | }
View compiled
checkDeferredModules
G:/WebDevelopmentFolder/trinkerrchallenge/webpack/bootstrap:45
  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | 
View compiled
Array.webpackJsonpCallback [as push]
G:/WebDevelopmentFolder/trinkerrchallenge/webpack/bootstrap:32
  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 |  var result;

TypeError:渲染不是函数
updateContextConsumer
G:/WebDevelopmentFolder/trinkerchallenge/node_modules/react-dom/cjs/react-dom.development.js:18747
18744 | {
18745 | ReactCurrentOwner$1.current=工作进度；
18746 | SETISRENDING（真）；
>18747 | newChildren=render（newValue）；
|^18748 | SETISRENDING（假）；
18749 |}//React DevTools读取此标志。
18750 | 
视图编译
开始工作
G:/WebDevelopmentFolder/trinkerchallenge/node_modules/react-dom/cjs/react-dom.development.js:19114
19111 |返回updateContextProvider（当前、工作进度、渲染平面）；
19112 | 
19113 |案例背景消费者：
>19114 |返回updateContextConsumer（当前、工作进程、渲染平面）；
| ^  19115 | 
19116 |案例组件：
19117 |   {
视图编译
HtmlUnknowneElement.callCallback
G:/WebDevelopmentFolder/trinkerchallenge/node_modules/react-dom/cjs/react-dom.development.js:3945
3942 |函数callCallback（）{
3943 | didCall=true；
3944 |调度后恢复（）；
>3945 |函数应用（上下文，函数）；
|^3946 | diderro=false；
3947 |}//创建一个全局错误事件处理程序。我们使用它来捕获值
3948 |//已抛出。此错误处理程序可能会触发更多错误
视图编译
invokeGuardedCallbackDev
G:/WebDevelopmentFolder/trinkerchallenge/node_modules/react-dom/cjs/react-dom.development.js:3994
3991 |//错误，它将触发全局错误处理程序。
3992 | 
3993 | evt.initEvent（evtType，false，false）；
>3994 | fakeNode.调度事件（evt）；
| ^  3995 | 
3996 |如果（windowEventDescriptor）{
3997 | Object.defineProperty（窗口“事件”，窗口事件描述符）；
视图编译
invokeGuardedCallback
G:/WebDevelopmentFolder/trinkerchallenge/node_modules/react-dom/cjs/react-dom.development.js:4056
4053 |函数invokeGuardedCallback（名称、函数、上下文、a、b、c、d、e、f）{
4054 | hasError=假；
4055 | caughtError=null；
>4056 | invokeGuardedCallbackImpl$1.apply（报告者、参数）；
4057 | }
4058 | /**
4059 |*与invokeGuardedCallback相同，但它不返回错误，而是存储
视图编译
开始工作1美元
G:/WebDevelopmentFolder/trinkerchallenge/node_modules/react-dom/cjs/react-dom.development.js:23964
23961 |}//再次开始工作。
23962 | 
23963 | 
>23964 | invokeGuardedCallback（null、beginWork、null、current、unitOfWork、lanes）；
| ^  23965 | 
23966 |如果（hasCaughtError（））{
23967 | var replayError=clearCaughtError（）；//`invokeGuardedCallback`有时设置expando`_suppressLogging`。
视图编译
执行工作
G:/WebDevelopmentFolder/trinkerchallenge/node_modules/react-dom/cjs/react-dom.development.js:22776
22773 | 
22774 |如果（（unitOfWork.mode和ProfileMode）！==NoMode）{
22775 | startProfilerTimer（工作单元）；
>22776 |下一步=开始工作$1（当前、工作单元、子渲染平面）；
|^22777 | StopperOffilerTimerFrunningandRecordDelta（工作单位，真实）；
22778 |}其他{
22779 |下一步=开始工作$1（当前、工作单元、子渲染平面）；
视图编译
workLoopSync
G:/WebDevelopmentFolder/trinkerchallenge/node_modules/react-dom/cjs/react-dom.development.js:22707
22704 |函数workLoopSync（）{
22705 |//已超时，因此在不检查是否需要让步的情况下执行工作。
22706 | while（工作进度！==null）{
>22707 |执行工作（工作进度）；
22708 |   }
22709 | }
22710 | 
视图编译
渲染同步
G:/WebDevelopmentFolder/trinkerchallenge/node_modules/react-dom/cjs/react-dom.development.js:22670
22667 | 
22668 |多{
22669 |试试看{
>22670 | workLoopSync（）；
|^22671 |中断；
22672 |}捕获量（thrownValue）{
22673 | handleError（根，thrownValue）；
视图编译
performSyncWorkOnRoot
G:/WebDevelopmentFolder/trinkerchallenge/node_modules/react-dom/cjs/react-dom.development.js:22293
22290 |   }
22291 |}其他{
22292 |车道=getNextLanes（根，诺兰）；
>22293 | exitStatus=renderRootSync（根，车道）；
| ^  22294 | }
22295 | 
22296 | if（root.tag！==LegacyRoot&&exitStatus===RootErrored）{
视图编译
调度更新光纤
G:/WebDevelopmentFolder/trinkerchallenge/node_modules/react-dom/cjs/react-dom.development.js:21881
21878 |//BatchedUpdate中的根目录应该是同步的，但是布局更新
21879 |//应推迟到批处理结束。
21880 | 
>21881 | PerformSyncWorkRoot（根）；
|^21882 |}其他{
21883 | ensureRootIsScheduled（根，事件时间）；
21884 |计划未决交互（根、车道）；
视图编译
更新容器
G:/WebDevelopmentFolder/trinkerchallenge/node_modules/react-dom/cjs/react-dom.development.js:25482
25479 |   }
25480 | 
25481 |排队更新（当前$1，更新）；
>25482 | scheduleUpdateOnFiber（当前$1，车道，事件时间）；
25483 |返回车道；
25484 | }
25485 |函数getPublicRootInstance（包含