闂鐨勬枃绔犲鑷翠粖澶╀箣鍓嶈繍琛宺eact椤圭洰鏃舵祻瑙堝櫒鎶涘嚭濂囨€殑閿欒锛欵rror:Invalidhookcall銆傞挬瀛愬彧鑳藉湪鍑芥暟缁勪欢鐨勪富浣撳唴閮ㄨ皟鐢ㄣ€傝繖鍙兘鐢变簬浠ヤ笅鍘熷洜涔嬩竴鑰屽彂鐢燂細1.鎮ㄥ彲鑳芥湁涓嶅尮閰嶇殑React鐗堟湰鍜屾覆鏌撳櫒锛堜緥濡俁eactDOM锛?.鎮ㄥ彲鑳借繚鍙嶄簡Hooks瑙勫垯3.鎮ㄥ彲鑳芥湁澶氫釜React鍓湰鐩稿悓鐨勫簲鐢ㄧ▼搴忔湁鍏冲浣曡皟璇曞拰淇姝ら棶棰樼殑鎻愮ず锛岃鍙傞槄https://fb.me/react-invalid-hook-call銆備负浠€涔堝鎬紵鏄洜涓鸿繖涓」鐩箣鍓嶆槸鍙互杩愯鐨勶紝浣嗘槸鎴戦噸鏂板畨瑁呬緷璧栧悗锛屽氨涓嶈兘杩愯浜嗐€傛垜鐪熺殑寰堥珮鍏村惉鍒板畠馃槩銆傛牴鎹姤閿欎俊鎭紝杩欏簲璇ユ槸ReactHooks鎶ラ敊銆傞€氳繃鎺掓煡锛岀‘璁ゆ槸鎴戜箣鍓嶆墦鍖呯殑涓€涓粍浠舵湁闂銆傝缁勪欢閫氳繃npm鍖呭畨瑁呭拰浣跨敤銆傚彧瑕佹妸杩欎釜缁勪欢浠庨」鐩腑鍘绘帀锛岃繖涓敊璇氨浼氭秷澶憋紝浣嗘槸涓囦竴鍑轰簡闂锛屽氨鍙兘姹傚姪浜庤胺姝岀殑鏂规硶浜嗐€傛灉鐒舵湁浜洪亣鍒颁簡鍜屾垜涓€鏍风殑闂锛屽湪react瀹樼綉涓婃壘鍒颁簡杩欎釜閿欒鐨勮缁嗘弿杩帮細鎬荤粨涓€涓嬶紝鍙兘鏄互涓嬪師鍥犻€犳垚鐨勶細React鍜孯eactDOM鐨勭増鏈笉鍖归厤鐮村潖浜嗚鍒欓挬銆侶ooks鍦≧eact娓叉煋鍑芥暟缁勪欢鏃惰璋冪敤锛氣渽瀹冧滑鍦ㄥ嚱鏁扮粍浠剁殑椤跺眰琚皟鐢ㄣ€傗渽鍦ㄨ嚜瀹氫箟Hooks鐨勯《灞傝皟鐢ㄥ畠浠€傞噸澶峈eact鍏充簬绗竴鐐癸紝瀹樼綉璇存槑鏈夊彲鑳戒娇鐢ㄤ簡涓嶆敮鎸丷eactHook鐨剅eact-dom鐗堟湰锛?16.8.0锛夛紝閫氳繃纭package涓殑react-dom鐗堟湰鍙峰嵆鍙帓闄?json銆傚啀鏉ョ湅绗簩鐐癸紝鍏充簬Hooks鐨勪娇鐢紝鍥犱负杩欐浠ｇ爜涔嬪墠宸茬粡杩愯鎴愬姛锛岄€氳繃妫€鏌ワ紝鍙互鑲畾鎺掗櫎銆傛渶鍚庡彧鍓╀笅绗笁鐐逛簡銆傜粏鐪嬨€傚畼缃戜篃瀵硅繖涓€鐐瑰仛浜嗚缁嗙殑鎻忚堪锛氫负浜嗚Hooks宸ヤ綔锛屼粠浣犵殑搴旂敤绋嬪簭浠ｇ爜涓鍏ョ殑react闇€瑕佽В鏋愪负涓庝粠react-dom鍖呭唴閮ㄧ殑react瀵煎叆鐩稿悓鐨勬ā鍧椼€傚鏋滆繖浜汻eact瀵煎叆瑙ｆ瀽涓轰袱涓笉鍚岀殑瀵煎嚭瀵硅薄锛屾偍灏嗙湅鍒版璀﹀憡銆傚鏋滀綘涓嶅皬蹇冨緱鍒颁簡react鍖呯殑涓や釜鍓湰锛屽氨鍙兘浼氬彂鐢熻繖绉嶆儏鍐点€傚棷锛岀湅鍒拌繖涓弿杩版湁鐐瑰惎鍙戯紝涓轰簡璁〩ooks姝ｅ父宸ヤ綔锛屽簲鐢ㄧ▼搴忎唬鐮佷腑鐨剅eact渚濊禆鍜宺eact-dom鍖呭唴閮ㄤ娇鐢ㄧ殑react渚濊禆蹇呴』瑙ｆ瀽鍒板悓涓€涓ā鍧椼€傚鏋滆繖浜涘弽搴斾緷璧栭」瑙ｆ瀽涓轰袱涓笉鍚岀殑瀵煎嚭锛屾偍灏嗙湅鍒版璀﹀憡銆傜粡姝ゅ垎鏋愶紝搴旇鏄垜鎵撳寘缁勪欢涓緷璧栫殑react鍜宺eact-dom鐗堟湰鍙蜂笌涓诲伐绋嬩緷璧栫殑react鍜宺eact-dom鐗堟湰鍙蜂笉涓€鑷村鑷寸殑銆傛壘鍒颁簡閿欒鍘熷洜锛岄偅涔堝浣曡В鍐冲憿锛熸垜鐜板湪瑕佸疄鐜扮殑鏁堟灉鏄細鎴戝紑鍙戠殑packageA涓垜渚濊禆鐨剅eact鍜宺eact-dom鐨勭増鏈彿瑕佸拰涓荤郴缁熷畨瑁呯殑react鍜宺eact-dom鐨勭増鏈彿涓€鑷达紝瀹夎packageA鍦ㄤ富绯荤粺涔嬪悗锛屼綘搴旇浠庝富绯荤粺渚濊禆react鍜宺eact-dom銆傜户缁槄璇绘枃妗ｏ紝涓€鍙ヨ瘽寮曡捣浜嗘垜鐨勬敞鎰忥細渚嬪锛屼篃璁镐綘姝ｅ湪浣跨敤鐨勫簱閿欒鍦板皢react鎸囧畾涓轰緷璧栭」锛堣€屼笉鏄绛変緷璧栭」锛夈€傝繖鎻愰啋鎴戯紝鎴戜娇鐢ㄧ殑搴撳彲鑳芥槸閿欒鐨凷pecifyreactasadependency(鑰屼笉鏄痯eerdependency)銆傚緢濂斤紝杩欓噷鍦╬ackage.json涓湁涓厤缃」鍙玴eerDependencies锛屾垜浠湪骞虫椂寮€鍙戜腑缁忓父浼氭帴瑙﹀埌dependencies鍜宒evDependencies锛岄偅涔坧eerDependencies鏄釜浠€涔堥锛熻璇唒eerDependenciespeerDependencies鍦ㄦ垜浠紑鍙戜竴浜涙彃浠剁殑鏃跺€欑粡甯镐細鐢ㄥ埌銆傛瘮濡俲Query-ui鐨勫紑鍙戜緷璧杍Query锛宧tml-webpack-plugin鐨勫紑鍙戜緷璧杦ebpack銆傛€荤粨璧锋潵鏈変互涓嬬壒鐐癸細鎻掍欢姝ｇ‘杩愯鐨勫墠鎻愭槸蹇呴』鍏堜笅杞藉畨瑁呮牳蹇冧緷璧栧簱锛屾病鏈夋牳蹇冧緷璧栧簱涓嶈兘鐙珛渚濊禆鍜屽紩鐢紱鎻掍欢鍏ュ彛api鐨勮璁″繀椤荤鍚堟牳蹇冧緷璧栧簱鐨勮鑼冿紱鎻掍欢鐨勬牳蹇冮€昏緫杩愯鍦ㄤ緷璧栧簱鐨勮皟鐢ㄤ腑锛涢」鐩疄璺典腑锛屽湪鍚屼竴涓彃浠剁郴缁熶笅锛屾牳蹇冧緷璧栧簱鐨勭増鏈渶濂界浉鍚岋紱涓句釜鏍楀瓙馃尠锛氬亣璁炬湁涓€涓猦elloWorld椤圭洰锛屽畠宸茬粡鍦ㄥ叾package.json鐨刣ependencies涓０鏄庝簡packageA锛屾湁涓や釜鎻掍欢plugin1鍜宲lugin2瀹冧滑涔熶緷璧杙ackageA锛屽鏋滀綘浣跨敤dependencies鑰屼笉鏄痯eerDependencies鏉ュ０鏄巔ackageA鎻掍欢锛岀劧鍚?npminstall瀹夎plugin1鍜宲lugin2涔嬪悗锛屼緷璧栧叧绯诲浘濡備笅鎵€绀猴細鈹€packageA鈹傗敂鈹€鈹€plugin2鈹傗攤鈹斺攢鈹€nodule_modules鈹傗攤鈹斺攢鈹€packageA浠庝笂闈㈢殑渚濊禆鍥句腑鍙互鐪嬪嚭helloWorld鏈韩宸茬粡瀹夎浜嗕竴娆ackageA锛屼絾鏄洜涓簆lugin1鍜宲lugin2涓殑渚濊禆涔熷０鏄庝簡packageA锛屾墍浠ackageA浼氭渶鍚庡畨瑁呬簡3娆★紝瀹夎2娆℃槸澶氫綑鐨勩€傝€宲eerDependency鍙互閬垮厤绫讳技鏍稿績渚濊禆搴撻噸澶嶄笅杞界殑闂銆傚鏋滃湪plugin1鍜宲lugin2鐨刾ackage.json涓娇鐢╬eerDependency澹版槑鏍稿績渚濊禆搴擄紝渚嬪锛歱lugin1/package.json{"peerDependencies":{"packageA":"1.0.1"}}plugin2/package.json{"peerDependencies":{"packageA":"1.0.1"}}鍦ㄤ富绯荤粺涓０鏄巔ackageA:helloWorld/package.json{"dependencies":{"packageA":"1.0.1"}}鐜板湪鍦ㄤ富绯荤粺涓璼ystem鎵ц$npminstall鐢熸垚鐨勪緷璧栧浘鏄繖鏍风殑锛?鈹溾攢鈹€helloWorld鈹傗敂鈹€鈹€node_modules鈹傗敎鈹€鈹€packageA鈹傗敎鈹€鈹€plugin1鈹傗敂鈹€鈹€plugin2鍙互鐪嬪埌鐢熸垚鐨勪緷璧栧浘鏄墎骞崇殑銆俻ackageA涔熷彧浼氬畨瑁呬竴娆°€傚洜姝わ紝鎴戜滑鎬荤粨浜嗘彃浠朵腑浣跨敤dependencies澹版槑渚濊禆搴撶殑鐗圭偣锛氬鏋滅敤鎴锋樉寮忎緷璧栨牳蹇冨簱锛屽垯鍙互蹇界暐鍚勪釜鎻掍欢鐨刾eerDependency澹版槑锛涘鏋滅敤鎴锋病鏈夋樉寮忎緷璧栨牳蹇冨簱锛屾彃浠秔eerDependencies涓０鏄庣殑鐗堟湰灏嗚瀹夎鍦ㄩ」鐩殑鏍圭洰褰曚笅锛涘綋鐢ㄦ埛渚濊禆鐨勭増鏈笌鍚勬彃浠朵緷璧栫殑鐗堟湰涓嶅吋瀹规椂锛屼細鎶ラ敊锛岃鐢ㄦ埛鑷淇锛涙€荤粨鐞嗚ВpeerDependencies鐨勭敤娉曞悗锛屽啀鍥炲埌闂鐨勫紑澶达紝闂灏辫繋鍒冭€岃В浜嗐€傞鍏堝湪涓荤郴缁熺殑package.json涓殑dependencies涓０鏄巖eact鍜宺eact-dom鐨勭増鏈細mainsystempackage.json{"dependencies":{"react":"^16.13.1","react-dom":"^16.13.1"}}鐒跺悗鍦ㄧ粍浠跺簱鐨刾ackage.json涓殑peerDependencies涓０鏄巖eact鍜宺eact-dom鐨勭増鏈細缁勪欢鐨刾ackage.json{"peerDependencies":{"react":">=16.12.0","react-dom":">=16.12.0"}}涓荤郴缁熸墽琛?npminstall鍚庯紝涓荤郴缁熷拰缁勪欢搴撳彲浠ュ叡浜玭ode_module涓畨瑁呯殑react鍜宺eact-dom鐨勪富绯荤粺銆傝嚦姝わ紝鎴戠粓浜庡彲浠ュぇ鍠婁竴澹扳€淥li!鈥濓紝闂鍦嗘弧瑙ｅ喅浜嗎儲(麓锝メ礂锝)鐢辫》鐨勩€傛洿澶氱簿褰╁唴瀹癸紝璇峰叧娉ㄦ垜鐨勫叕浼楀彿锛?/p>
