为什么使用状态在 React + javascript 中不起作用？

Question

我正在尝试在我的 HTML & javascript 中使用 React 组件。所以我该怎么做我通过 webpack 编译我的 React 组件并在 UMD 中创建一个包文件。当我创建一个 Hello world 示例时它工作正常。

在不使用状态的情况下，在下面的示例中工作正常。这是工作示例

https://jsbin.com/paduyarase/edit?html,output

现在我在我的组件中引入了 usestate。我编译了下面的函数并使用了 javascript 它不起作用。

import React from 'react';

const Index = () => {
    const [state,setState] = React.useState(0)
  return (
      <div>
        hello World {state}
      </div>
  );
};

export default Index;

这个组件不工作 https://jsbin.com/hefiretaru/edit?html,output

获取错误

error 错误：缩小 React 错误 #321；访问 https://reactjs.org/docs/error-decoder.html?invariant=321 获取完整消息或使用非缩小开发环境获取完整错误和其他有用的警告。在 L (:10:4000) 在 Object.useState (:10:5366) 在 t.default (:2:1777) 在 renderWithHooks (https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js:15015:20) 在 mountIndeterminateComponent (https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js:17841:15) 在 beginWork (https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js:19079:18) 在 HTMLUnknownElement.callCallback (https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js:3942:16) 在 Object.invokeGuardedCallbackDev (https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js:3991:18) 在 invokeGuardedCallback (https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js:4053:33) 在 beginWork$1 (https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js:23994:9) VM178:10 未捕获错误：缩小 React 错误 #321；访问 https://reactjs.org/docs/error-decoder.html?invariant=321 获取完整消息或使用非缩小开发环境获取完整错误和其他有用的警告。在 L (:10:4000) 在 Object.useState (:10:5366) 在 t.default (:2:1777) 在 renderWithHooks (VM165 react-dom.development.js:15015)

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/react@17.0.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js"></script>
   <script>
     !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.MyCom=t():e.MyCom=t()}(window,(function(){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(e,t,r){"use strict";e.exports=r(2)},function(e,t,r){"use strict";r.r(t);var n=r(0),o=r.n(n);function u(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)))return;var r=[],n=!0,o=!1,u=void 0;try{for(var c,f=e[Symbol.iterator]();!(n=(c=f.next()).done)&&(r.push(c.value),!t||r.length!==t);n=!0);}catch(e){o=!0,u=e}finally{try{n||null==f.return||f.return()}finally{if(o)throw u}}return r}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}t.default=function(){var e=u(o.a.useState(0),2),t=e[0];e[1];return o.a.createElement("div",null,"hello World ",t)}},function(e,t,r){"use strict";
/** @license React v16.12.0
 * react.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var n=r(3),o="function"==typeof Symbol&&Symbol.for,u=o?Symbol.for("react.element"):60103,c=o?Symbol.for("react.portal"):60106,f=o?Symbol.for("react.fragment"):60107,l=o?Symbol.for("react.strict_mode"):60108,i=o?Symbol.for("react.profiler"):60114,a=o?Symbol.for("react.provider"):60109,s=o?Symbol.for("react.context"):60110,p=o?Symbol.for("react.forward_ref"):60112,y=o?Symbol.for("react.suspense"):60113;o&&Symbol.for("react.suspense_list");var d=o?Symbol.for("react.memo"):60115,b=o?Symbol.for("react.lazy"):60116;o&&Symbol.for("react.fundamental"),o&&Symbol.for("react.responder"),o&&Symbol.for("react.scope");var m="function"==typeof Symbol&&Symbol.iterator;function v(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,r=1;r<arguments.length;r++)t+="&args[]="+encodeURIComponent(arguments[r]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var h={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},S={};function g(e,t,r){this.props=e,this.context=t,this.refs=S,this.updater=r||h}function j(){}function _(e,t,r){this.props=e,this.context=t,this.refs=S,this.updater=r||h}g.prototype.isReactComponent={},g.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error(v(85));this.updater.enqueueSetState(this,e,t,"setState")},g.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},j.prototype=g.prototype;var O=_.prototype=new j;O.constructor=_,n(O,g.prototype),O.isPureReactComponent=!0;var w={current:null},x={current:null},k=Object.prototype.hasOwnProperty,P={key:!0,ref:!0,__self:!0,__source:!0};function C(e,t,r){var n,o={},c=null,f=null;if(null!=t)for(n in void 0!==t.ref&&(f=t.ref),void 0!==t.key&&(c=""+t.key),t)k.call(t,n)&&!P.hasOwnProperty(n)&&(o[n]=t[n]);var l=arguments.length-2;if(1===l)o.children=r;else if(1<l){for(var i=Array(l),a=0;a<l;a++)i[a]=arguments[a+2];o.children=i}if(e&&e.defaultProps)for(n in l=e.defaultProps)void 0===o[n]&&(o[n]=l[n]);return{$$typeof:u,type:e,key:c,ref:f,props:o,_owner:x.current}}function E(e){return"object"==typeof e&&null!==e&&e.$$typeof===u}var $=/\/+/g,R=[];function A(e,t,r,n){if(R.length){var o=R.pop();return o.result=e,o.keyPrefix=t,o.func=r,o.context=n,o.count=0,o}return{result:e,keyPrefix:t,func:r,context:n,count:0}}function M(e){e.result=null,e.keyPrefix=null,e.func=null,e.context=null,e.count=0,10>R.length&&R.push(e)}function I(e,t,r){return null==e?0:function e(t,r,n,o){var f=typeof t;"undefined"!==f&&"boolean"!==f||(t=null);var l=!1;if(null===t)l=!0;else switch(f){case"string":case"number":l=!0;break;case"object":switch(t.$$typeof){case u:case c:l=!0}}if(l)return n(o,t,""===r?"."+q(t,0):r),1;if(l=0,r=""===r?".":r+":",Array.isArray(t))for(var i=0;i<t.length;i++){var a=r+q(f=t[i],i);l+=e(f,a,n,o)}else if(null===t||"object"!=typeof t?a=null:a="function"==typeof(a=m&&t[m]||t["@@iterator"])?a:null,"function"==typeof a)for(t=a.call(t),i=0;!(f=t.next()).done;)l+=e(f=f.value,a=r+q(f,i++),n,o);else if("object"===f)throw n=""+t,Error(v(31,"[object Object]"===n?"object with keys {"+Object.keys(t).join(", ")+"}":n,""));return l}(e,"",t,r)}function q(e,t){return"object"==typeof e&&null!==e&&null!=e.key?function(e){var t={"=":"=0",":":"=2"};return"$"+(""+e).replace(/[=:]/g,(function(e){return t[e]}))}(e.key):t.toString(36)}function T(e,t){e.func.call(e.context,t,e.count++)}function U(e,t,r){var n=e.result,o=e.keyPrefix;e=e.func.call(e.context,t,e.count++),Array.isArray(e)?F(e,n,r,(function(e){return e})):null!=e&&(E(e)&&(e=function(e,t){return{$$typeof:u,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(e,o+(!e.key||t&&t.key===e.key?"":(""+e.key).replace($,"$&/")+"/")+r)),n.push(e))}function F(e,t,r,n,o){var u="";null!=r&&(u=(""+r).replace($,"$&/")+"/"),I(e,U,t=A(t,u,n,o)),M(t)}function L(){var e=w.current;if(null===e)throw Error(v(321));return e}var N={Children:{map:function(e,t,r){if(null==e)return e;var n=[];return F(e,n,null,t,r),n},forEach:function(e,t,r){if(null==e)return e;I(e,T,t=A(null,null,t,r)),M(t)},count:function(e){return I(e,(function(){return null}),null)},toArray:function(e){var t=[];return F(e,t,null,(function(e){return e})),t},only:function(e){if(!E(e))throw Error(v(143));return e}},createRef:function(){return{current:null}},Component:g,PureComponent:_,createContext:function(e,t){return void 0===t&&(t=null),(e={$$typeof:s,_calculateChangedBits:t,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null}).Provider={$$typeof:a,_context:e},e.Consumer=e},forwardRef:function(e){return{$$typeof:p,render:e}},lazy:function(e){return{$$typeof:b,_ctor:e,_status:-1,_result:null}},memo:function(e,t){return{$$typeof:d,type:e,compare:void 0===t?null:t}},useCallback:function(e,t){return L().useCallback(e,t)},useContext:function(e,t){return L().useContext(e,t)},useEffect:function(e,t){return L().useEffect(e,t)},useImperativeHandle:function(e,t,r){return L().useImperativeHandle(e,t,r)},useDebugValue:function(){},useLayoutEffect:function(e,t){return L().useLayoutEffect(e,t)},useMemo:function(e,t){return L().useMemo(e,t)},useReducer:function(e,t,r){return L().useReducer(e,t,r)},useRef:function(e){return L().useRef(e)},useState:function(e){return L().useState(e)},Fragment:f,Profiler:i,StrictMode:l,Suspense:y,createElement:C,cloneElement:function(e,t,r){if(null==e)throw Error(v(267,e));var o=n({},e.props),c=e.key,f=e.ref,l=e._owner;if(null!=t){if(void 0!==t.ref&&(f=t.ref,l=x.current),void 0!==t.key&&(c=""+t.key),e.type&&e.type.defaultProps)var i=e.type.defaultProps;for(a in t)k.call(t,a)&&!P.hasOwnProperty(a)&&(o[a]=void 0===t[a]&&void 0!==i?i[a]:t[a])}var a=arguments.length-2;if(1===a)o.children=r;else if(1<a){i=Array(a);for(var s=0;s<a;s++)i[s]=arguments[s+2];o.children=i}return{$$typeof:u,type:e.type,key:c,ref:f,props:o,_owner:l}},createFactory:function(e){var t=C.bind(null,e);return t.type=e,t},isValidElement:E,version:"16.12.0",__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{ReactCurrentDispatcher:w,ReactCurrentBatchConfig:{suspense:null},ReactCurrentOwner:x,IsSomeRendererActing:{current:!1},assign:n}},D={default:N},V=D&&N||D;e.exports=V.default||V},function(e,t,r){"use strict";
/*
object-assign
(c) Sindre Sorhus
@license MIT
*/var n=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable;function c(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach((function(e){n[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var r,f,l=c(e),i=1;i<arguments.length;i++){for(var a in r=Object(arguments[i]))o.call(r,a)&&(l[a]=r[a]);if(n){f=n(r);for(var s=0;s<f.length;s++)u.call(r,f[s])&&(l[f[s]]=r[f[s]])}}return l}}])}));
  </script>
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
    <script>
        ReactDOM.render(
          React.createElement(MyCom.default),
          document.getElementById('root')
        );
      </script>
</body>
</html>

Answer 1

Minified React error #321 通常意味着你有两个冲突的 React 版本。在您的编辑器中搜索 "react":。如果您找到两个版本（16.8 和 17.0），则问题已解决。

如果不是重复，请删除 class 个组件的 render() 中的任何注释。

为什么使用状态在 React + javascript 中不起作用？

why use state is not working in react + javascript?

javascript

reactjs

webpack

umd