React学习中的BUG与解决

1.创建react项目时报错：

参照来源
报错信息摘录：

npm ERR! Unexpected end of JSON input while parsing near '....0.5","gitdown":"^3.1'

解决方法：
第一步：

npm cache clean --force

第二步：

npm set registry https://registry.npmjs.org/

2.npm start 中出现 的webpack版本问题

参考来源
报错信息：

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix 
locally.

The react-scripts package provided by Create React App requires a dependency:

  "webpack": "4.42.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:

  C:\Users\LXC\node_modules\webpack (version: 4.43.0)

Manually installing incompatible versions is known to cause hard-to-debug 
issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

报错原因：

react项目依赖webpack版本为4.42.0，而我安装的是4.43.0，所以导致失败。

解决方法：
进入系统CMD（不是Vscode中）

1. 删除全局webpack-cli：

npm uninstall -g webpack-cli

2. 删除本地（局部）webpack-cli

npm uninstall webpack-cli

3. 删除全局webpack

npm uninstall -g webpack

4. 删除本地webpack

npm un webpack

安装webpack：
安装你需要的版本：

npm install --save-dev webpack@<version>

安装webpack-cli：

npm install --save-dev webpack-cli

检查webpack是否安装成功

使用cd进入出错的文件夹下的bin：

c:\...\node_modules/.bin/webpack -v

3.报错 Expected an assignment or function call and instead saw an expression no-unused-express

报错内容

Failed to compile
./src/pages/home/component/Recommend.js
  Line 13:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

Search for the keywords to learn more about each error.

错误代码

class Recommend extends Component {
  render() {
  	const { list } = this.props;
  	return (
      <RecommendWrapper>
        {
          list.map((item) => {
	        <RecommendItem 
	           key={item.get('id')}
	           className={item.get('class')}
	         >
	           {item.get('content')}              
	        </RecommendItem>
          })
        }
      </RecommendWrapper>
  	)
  }
}

解决办法
法一

class Recommend extends Component {
  render() {
  	const { list } = this.props;
  	return (
      <RecommendWrapper>
        {
          list.map((item) => {
            return (
	            <RecommendItem 
	              key={item.get('id')}
	              className={item.get('class')}
	            >
	              {item.get('content')}              
	            </RecommendItem>
            )
          })
        }
      </RecommendWrapper>
  	)
  }
}

法二

class Recommend extends Component {
  render() {
  	const { list } = this.props;
  	return (
      <RecommendWrapper>
        {
          list.map((item) => 
	            <RecommendItem 
	              key={item.get('id')}
	              className={item.get('class')}
	            >
	              {item.get('content')}              
	            </RecommendItem>
          })
        }
      </RecommendWrapper>
  	)
  }
}

参考1，
参考2

4.npm ERR! notarget No matching version found for XXXX@x.x.x.

报错详情：

解决方法：

// 查看此模块的注册信息
npm view rewired 

安装对应插件：

运行成功！
参考。