那些年，被各种 Error 折磨的瞬间 #

React Error #

React error #31 #

错误原因：

React 的 render 函数只能渲染指定的返回值类型，包括 string、number、JSX 对象，以及它们组成的数组。

若返回了普通的对象，如 {name: 'React'}，则会报该错误。

const obj = { name: 'react' };

function demo() {
  return (<>{obj}</>);
}

解决方法：渲染结构返回正确的类型。

Error: Minified React error #31

一个实际生产环境遇到该报错的案例，深入源码层面寻找剖析错误根源。

React#31 error，让我熬夜让我秃

React error #62 #

错误原因：JSX 对象的 style，即行内样式书写有误。style 应为对象，不能是字符串。

function demo() {
  return (
    <div style="color: red">
      demo text
    </div>
  );
}

解决方法：正确书写行内样式。

function demo() {
  return (
    <div style={{ color: "red" }}>
      demo text
    </div>
  );
}

Error: Minified React error #62

React error #130 #

错误原因：JSX 节点没正确引入，是个 undefined。

// 这里TabPane最终是个undefined
const { TabPane } = Tabs.TabPane;

function demo() {
  return (
    <TabPane>
      demo text
    </TabPane>
  );
}

解决方法：正确引入，确保是个正确的 JSX 节点。

const { TabPane } = Tabs;

function demo() {
  return (
    <TabPane>
      demo text
    </TabPane>
  );
}

Error: Minified React error #130

React error #185 #

错误原因：写了死循环，导致栈溢出。

在 render 方法或 componentWillUpdate、componentDidUpdate 钩子中调用 setState 可能会出现该错误。

class demo extends React.Component {
  state = {
    loading: true,
  };

  render() {
    const { loading } = this.state;
    this.setState({ loading: !loading });
    return (<div>2322</div>);
  }
}

解决方法：不要再 render 等方法里调用 setState。

Git #

根据远程分支创建本地分支报错 #

git checkout -b dev origin/dev

错误提示：

fatal: 'origin/dev' is not a commit and a branch 'dev' cannot be created from it

错误原因：远程没有 dev 这个分支。

解决方法：git pull 拉取最新远程代码，再执行创建分支命令。

fatal: Authentication failed for '' #

错误原因：git 账号改了密码，需要重新输入密码，但用户名或密码输错了。

解决方法：

1. 检查密码

先检查用户名和密码是否正确，本人就是用户名输错了。

2. git 命令

输入以下命令，删除本地 git 凭据，这样下次 git 就会要求输入用户名和密码。

git config --system --unset credential.helper

再输入以下命令，重新生成本地凭据文件，通常是 ~/.git-credentials。

git config --global credential.helper store

最后再执行 git pull 命令，会提示输入账号密码。

3. 修改 Windows 用户凭据

入口：控制面板-用户账户-管理你的凭据-Windows凭据。

找到对应的 git 网站，编辑用户名和密码，保存即可。

ssh 登录 GitHub 报错：Connection to xxx port 22: Software caused connection abort #

修改 GitHub 的端口为 443。

# edit this file, if there not, create one
vim ~/.ssh/config

# add the content below to the file
# then it will use port 443 when ssh connect to github
Host github.com
Hostname ssh.github.com
Port 443

# test if it works
# if it works, it shows tip: Hi xxxxx! You've successfully authenticated, but GitHub does not provide shell access
ssh -T git@github.com

ssh: connect to host github.com port 22: Connection refused

NPM #

npm ERR! code ELIFECYCLE #

错误原因：node_modules 中下载的依赖包的版本，和 package-lock.json 中记录的版本发生冲突。

解决方法：清空缓存，删除 node_modules 和 package-lock.json，重新安装依赖包。

npm cache clean --force
# 强制删除 node_mudules 及其内容
rm -rf node_modules
rm package-lock.json
npm install

PostCSS plugin postcss-resolve-url requires PostCSS 8 #

错误原因：postcss 版本不对。

解决方法：重新安装对应版本。

npm install @postcss8.4.6 -D

安装依赖报错：npm WARN tar ENOENT: no such file or directory #

错误原因：依赖包有问题。

解决方法：删除 package-lock.json，重新安装依赖包。

rm package-lock.json
npm install

eslint 编译报错 Cannot read property ‘range’ of null #

具体看看文章，当时自己怎么解决的忘记了。

彻底解决 Cannot read property ‘range‘ of null 错误的几个方案和后期造成的一劳永逸的方案

【解决方案】ESLINT 报错: Cannot read property 'range' of null

小黑窗命令 #

rm 删除命令报错 #

在 Windows cmd窗口运行 rm -rf 命令报错：rm 不是内部或外部命令，也不是可运行的程序。

错误原因：rm -rf 是 Linux 命令，在 Windows 中不支持。

解决方法：Windows 里使用 rimraf 命令。

rimraf 命令报错 #

在 Windows cmd窗口运行 rimraf 命令报错：rimraf 不是内部命令

错误原因：rimraf 是 Node.js 包，在 Windows 中不支持。

解决方法：使用 npm install -g rimraf 命令全局安装，再输入命令。