React.memo is not a function
Posted shengliang74
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React.memo is not a function相关的知识,希望对你有一定的参考价值。
最近在运行项目的时候报了一个React.memo is not a function,
报错类似如下
D:myCodemyProject ode_modules estPackageindex.js:22 })(React.momo(testPackage)); TypeError: React.memo is not a function at Object.<anonymous> ... ...
一番搜索后基本上得到的答案基本上都是将React升级到16.6.6以上,可是这不是我项目里的代码,是插件包里的代码。我项目里package.json文件的react已经是16.13.1了。这又是为什么了
于是我找到了报错的文件D:myCodemyProject ode_modules estPackageindex.js在里面增加了一个console打印了react的信息。代码类似如下
var React = require("react"); var test = require("../test"); console.log(React) function myPackage(){ ... ... } exports.default = test.default({ ... ... })(React.memo(myPackage));
打印信息如下
{ ... version: ‘16.4.2‘, ... }
what? 为啥是16.4.2因为这是已经编译过的采用common.js规范,所以我又打印了module信息代码类似如下
var React = require("react"); var test = require("../test"); console.log(React) console.log(module) function myPackage(){ ... ... } exports.default = test.default({ ... ... })(React.memo(myPackage));
module信息如下类似
{ id: ‘D:\myCode\myProject\node_modules\testPackge\index.js‘, exports:{}, parent:[{...}] , filename: ‘D:\myCode\myProject\node_modules\testPackge\index.js‘, loaded: false, children: [{ id: ‘D:\Users\myName\AppData\Roaming\npm\node_modules\test-cli\node_modules\react\index.js‘ }], paths:[ ‘D:\myCode\myProject\node_modules\testPackge\node_modules‘, ‘D:\Users\myName\AppData\Roaming\npm\node_modules\test-cli\node_modules\testPackage\node_modules‘, ‘D:\Users\myName\AppData\Roaming\npm\node_modules\test-cli\node_modules‘, ‘D:\myCode\myProject\node_modules‘, ‘D:\myCode\node_modules‘, ‘D:\node_modules‘ ] }
module信息里children就是这个模块所引入的模块信息,parent就是这个调用这个模块的信息,根据children可以看出引入的react是一个叫test-cli全局安装包里的react,那么找到这个react后查看版本果然是16.4.2。所以重新全局安装一下test-cli更新一下版本就ok了。
以上是关于React.memo is not a function的主要内容,如果未能解决你的问题,请参考以下文章
React性能优化之memo,useMemo,useCallback的使用与区别
React.memo()、useCallback()、useMemo() 区别及基本使用
React报错:Error: Element type is invalid: expected a string (for built-in components) or a class/funct