React JS中useState()调用异常致应用停止运行排查

程序崩溃是useState的导入写法错误导致的。
你当前使用import useState from "react";是默认导入语法，但useState是React的命名导出Hook，不属于React的默认导出项。这种错误写法会导致拿到的useState值为undefined，调用undefined时会直接抛出类型错误，中断整个应用运行；注释掉useState相关代码后没有了错误调用，程序自然恢复正常。

二选一即可：

• 保留第一行的import React from "react"，调用时写React.useState，不需要单独导入useState
• 把单独导入useState的语句改成命名导入写法：import { useState } from "react";，注意导入内容外层要加花括号

import React from "react";
import { Helmet } from "react-helmet";
import { Link } from "react-router-dom";
// 修正后的useState命名导入，也可以删掉这行直接用React.useState
import { useState } from "react";

import "./login.scss";

const Login = (props) => {
  const [credentials, setCredentials] = useState({
    user_name: '',
    password: '',
  })


  return (
    <div className="application">
     
    </div>
  );
}

export default Login;

补充说明：React 17及以上版本虽然支持JSX文件不单独导入React，但使用Hook时仍需要通过命名导入的方式引入对应Hook，或者导入React后通过React.xxxHook的形式调用，不能用默认导入的方式单独引入单个Hook。

内容的提问来源于stack exchange，提问作者Ovi Poddar