Reactjs 函数元素类型内的React useState钩子无效

我有一个应用程序在尝试从异步函数内部使用useState钩子时出错

这里是App.js

import React, { useState, useEffect } from "react";
import { Auth } from "aws-amplify";
import { Link, withRouter } from "react-router-dom";
import { Nav, Navbar} from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";
import Routes from "./Routes";


function App(props) {
  const [isAuthenticating, setIsAuthenticating] = useState(true);
  const [isAuthenticated, userHasAuthenticated] = useState(false);

  useEffect(() => {
    onLoad();
  }, []);

  async function onLoad() {
    try {
      await Auth.currentSession();
      userHasAuthenticated(true);
    }
    catch(e) {
      if (e !== 'No current user') {
        alert(e);
      }
    }
    setIsAuthenticating(false);  <-------- errors

  }

  async function handleLogout() {
    await Auth.signOut();

    userHasAuthenticated(false);

    props.history.push("/login");
  }

  return (
    !isAuthenticating && (
      <div>
        <Navbar fluid collapseOnSelect>
          <Navbar.Header>
            <Navbar.Brand>
              <Link to="/">Spaced - In</Link>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav pullRight>
              {isAuthenticated ? (
                <>
                  <LinkContainer to="/settings">
                    <Nav.Link>Settings</Nav.Link>
                  </LinkContainer>
                  <Nav.Link onClick={handleLogout}>Logout</Nav.Link>
                </>
              ) : (
                <>
                  <LinkContainer to="/signup">
                    <Nav.Link>Signup</Nav.Link>
                  </LinkContainer>
                  <LinkContainer to="/login">
                    <Nav.Link>Login</Nav.Link>
                  </LinkContainer>
                </>
              )}
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        <Routes appProps={{ isAuthenticated, userHasAuthenticated }} />
      </div>
    )
  );
}

export default withRouter(App);

index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";
import "./index.css";
import Amplify from "aws-amplify";
import 'bootstrap/dist/css/bootstrap.min.css';
import config from "./config";

Amplify.configure({
  Auth: {
    mandatorySignIn: true,
    region: config.cognito.REGION,
    userPoolId: config.cognito.USER_POOL_ID,
    identityPoolId: config.cognito.IDENTITY_POOL_ID,
    userPoolWebClientId: config.cognito.APP_CLIENT_ID
  }
,
  Storage: {
    region: config.s3.REGION,
    bucket: config.s3.BUCKET,
    identityPoolId: config.cognito.IDENTITY_POOL_ID
  },
  API: {
    endpoints: [
      {
        name: "spaces",
        endpoint: config.apiGateway.URL,
        region: config.apiGateway.REGION
      },
    ]
  }
});

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);
registerServiceWorker();

更新错误-删除！正在从App.js中的返回进行身份验证（&I）

元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

检查

App

的渲染方法

onLoad
src/App.js:28

  25 |       alert(e);
  26 |     }
  27 |   }
> 28 |   setIsAuthenticating(false);
     | ^  29 |  
  30 | }
  31 | 

./src/index.js
src/index.js:36

  33 |   }
  34 | });
  35 | 
> 36 | ReactDOM.render(
  37 |   <Router>
  38 |     <App />
  39 |   </Router>,

__webpack_require__
/home/geekylumberjack/Desktop/spaced-in/webpack/bootstrap:785

  782 | };
  783 | 
  784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  786 | 
  787 | // Flag the module as loaded
  788 | module.l = true;

fn
/home/geekylumberjack/Desktop/spaced-in/webpack/bootstrap:150

  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {

0
http://localhost:3000/static/js/main.chunk.js:1515:18
__webpack_require__
/home/geekylumberjack/Desktop/spaced-in/webpack/bootstrap:785

  782 | };
  783 | 
  784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  786 | 
  787 | // Flag the module as loaded
  788 | module.l = true;

checkDeferredModules
/home/geekylumberjack/Desktop/spaced-in/webpack/bootstrap:45

  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | 

webpackJsonpCallback
/home/geekylumberjack/Desktop/spaced-in/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;

/src/index.js
src/index.js:36
33 |   }
34 | });
35 | 
>36 | ReactDOM.render(
37 |   
38 |     
39 |   ,
__需要的网页__
/主页/geekylumberjack/桌面/间隔英寸/网页包/引导：785
782 | };
783 | 
784 |//执行模块函数
>785 | modules[moduleId]。调用（module.exports，module，module.exports，hotCreateRequire（moduleId））；
| ^  786 | 
787 |//将模块标记为已加载
788 | module.l=真；
fn
/主页/geekylumberjack/桌面/间隔英寸/网页包/引导：150
147 |         );
148 | hotCurrentParents=[]；
149 |     }
>150 |返回|网页|要求| |请求|；
| ^  151 | };
152 | var ObjectFactory=函数ObjectFactory（名称）{
153 |返回{
0
http://localhost:3000/static/js/main.chunk.js:1515:18
__需要的网页__
/主页/geekylumberjack/桌面/间隔英寸/网页包/引导：785
782 | };
783 | 
784 |//执行模块函数
>785 | modules[moduleId]。调用（module.exports，module，module.exports，hotCreateRequire（moduleId））；
| ^  786 | 
787 |//将模块标记为已加载
788 | module.l=真；
检查延迟模块
/主页/geekylumberjack/桌面/间隔英寸/网页包/引导：45
42 |  }
43 |如果（履行）{
44 |延迟模块。拼接（i--，1）；
>45 | result=uuuuu webpack_uurequire_uuuuu（uuu webpack_require_uuu.s=deferredModule[0]）；
| ^  46 |  }
47 | }
48 | 
webpackJsonpCallback
/主页/geekylumberjack/桌面/间隔英寸/网页包/引导：32
29 | deferredModules.push.apply（deferredModules，executeModules | |【】）；
30 | 
31 |//在所有块就绪时运行延迟模块
>32 |返回checkDeferredModules（）；
| ^  33 | };
34 |功能检查延迟模块（）{
35 | var结果；

如果其他任何人遇到此问题，似乎如果您在任何函数返回中有不正确的内容，它将在索引处或在该集合验证处出错（false）.

在那里发生错误毫无意义。你的

应用程序

函数组件的返回值是多少？错误只是误导。你没有错误地导出/导入模块。很难说上面的代码片段我添加了更多的代码。请让我知道，乍一看，是否还有其他帮助使用

！IsAuthentication&&（…

当

IsAuthentication

为

true

时，您的应用程序将返回

未定义的
，并且React无法呈现该结果。尽管如此，我不确定第28行报告错误的原因。可能是因为SetAuthentication（false）触发返回false而不是element的rerender。只需尝试将
！IsAuthentication&&（…
替换为类似
IsAuthentication？Authentication…：（…
./src/index.js
src/index.js:36

  33 |   }
  34 | });
  35 | 
> 36 | ReactDOM.render(
  37 |   <Router>
  38 |     <App />
  39 |   </Router>,

__webpack_require__
/home/geekylumberjack/Desktop/spaced-in/webpack/bootstrap:785

  782 | };
  783 | 
  784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  786 | 
  787 | // Flag the module as loaded
  788 | module.l = true;

fn
/home/geekylumberjack/Desktop/spaced-in/webpack/bootstrap:150

  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {

0
http://localhost:3000/static/js/main.chunk.js:1515:18
__webpack_require__
/home/geekylumberjack/Desktop/spaced-in/webpack/bootstrap:785

  782 | };
  783 | 
  784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  786 | 
  787 | // Flag the module as loaded
  788 | module.l = true;

checkDeferredModules
/home/geekylumberjack/Desktop/spaced-in/webpack/bootstrap:45

  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | 

webpackJsonpCallback
/home/geekylumberjack/Desktop/spaced-in/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;