react之index.js

先创建一个react工程

create-react-app first-react
cd first-react
npm start

我们打开目录下的index.js文件,从入口文件开始认识react

// index.js
import React from 'react';
// ReactDom用于页面渲染
import ReactDOM from 'react-dom';
// index.css用于处理页面样式
import './index.css';
// App 是一个组件
import App from './App';
import * as serviceWorker from './serviceWorker';

// 用ReactDOM.render来将元素渲染到页面中
ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();


  1. 在index.js中,导入的App是一个组件,将组件通过ReactDom.render就可以渲染到页面上 React是ReactJs的核心.
  2. React 开发的过程就是通过开发各类组件,并将各类组件拼接成我们所需要的页面.
Uncaught Error: Cannot find module './vehicleMounted.png' at webpackContextResolve (chunk-common.a077d8.js?5adafe2ecde3d31e63f5:5460:11) at webpackContext (chunk-common.a077d8.js?5adafe2ecde3d31e63f5:5455:11) at eval (index.jsx:79:29) at Array.map (<anonymous>) at LayerMenu (index.jsx:70:22) at renderWithHooks (react-dom.development.js:14985:18) at updateFunctionComponent (react-dom.development.js:17356:20) at beginWork (react-dom.development.js:19063:16) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:14) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16) webpackContextResolve @ chunk-common.a077d8.js?5adafe2ecde3d31e63f5:5460 webpackContext @ chunk-common.a077d8.js?5adafe2ecde3d31e63f5:5455 eval @ index.jsx:79 LayerMenu @ index.jsx:70 renderWithHooks @ react-dom.development.js:14985 updateFunctionComponent @ react-dom.development.js:17356 beginWork @ react-dom.development.js:19063 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 beginWork$1 @ react-dom.development.js:23959 performUnitOfWork @ react-dom.development.js:22774 workLoopSync @ react-dom.development.js:22702 renderRootSync @ react-dom.development.js:22665 performSyncWorkOnRoot @ react-dom.development.js:22288 eval @ react-dom.development.js:11327 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 flushSyncCallbackQueueImpl @ react-dom.development.js:11322 flushSyncCallbackQueue @ react-dom.development.js:11309 scheduleUpdateOnFiber @ react-dom.development.js:21888 enqueueSetState @ react-dom.development.js:12467 Component.setState @ react.development.js:365 eval @ index.jsx:493 Promise.then _callee$ @ index.jsx:137 tryCatch @ runtime.js:63 invoke @ runtime.js:294 eval @ runtime.js:119 asyncGeneratorStep @ asyncToGenerator.js:6 _next @ asyncToGenerator.js:28 Promise.then asyncGeneratorStep @ asyncToGenerator.js:16 _next @ asyncToGenerator.js:28 eval @ asyncToGenerator.js:35 eval @ asyncToGenerator.js:24 componentDidMount @ index.jsx:27 commitLifeCycles @ react-dom.development.js:20658 commitLayoutEffects @ react-dom.development.js:23421 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 commitRootImpl @ react-dom.development.js:23146 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 commitRoot @ react-dom.development.js:22985 performSyncWorkOnRoot @ react-dom.development.js:22324 eval @ react-dom.development.js:11327 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 flushSyncCallbackQueueImpl @ react-dom.development.js:11322 flushSyncCallbackQueue @ react-dom.development.js:11309 scheduleUpdateOnFiber @ react-dom.development.js:21888 enqueueSetState @ react-dom.development.js:12467 Component.setState @ react.development.js:365 _callee$ @ index.jsx:43 tryCatch @ runtime.js:63 invoke @ runtime.js:294 eval @ runtime.js:119 asyncGeneratorStep @ asyncToGenerator.js:6 _next @ asyncToGenerator.js:28 Promise.then asyncGeneratorStep @ asyncToGenerator.js:16 _next @ asyncToGenerator.js:28 eval @ asyncToGenerator.js:35 eval @ asyncToGenerator.js:24 componentDidMount @ index.jsx:34 commitLifeCycles @ react-dom.development.js:20658 commitLayoutEffects @ react-dom.development.js:23421 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 commitRootImpl @ react-dom.development.js:23146 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 commitRoot @ react-dom.development.js:22985 performSyncWorkOnRoot @ react-dom.development.js:22324 scheduleUpdateOnFiber @ react-dom.development.js:21876 updateContainer @ react-dom.development.js:25477 eval @ react-dom.development.js:26016 unbatchedUpdates @ react-dom.development.js:22426 legacyRenderSubtreeIntoContainer @ react-dom.development.js:26015 render @ react-dom.development.js:26098 eval @ index_full_view_new.js:33 ./src/entry/index_full_view_new.js @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:69 __webpack_require__ @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:98 (anonymous) @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:1304 __webpack_require__.O @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:145 (anonymous) @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:1305 (anonymous) @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:1307 react-dom.development.js:10307 Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. at removeChildFromContainer (react-dom.development.js:10307:15) at unmountHostComponents (react-dom.development.js:21289:9) at commitDeletion (react-dom.development.js:21342:5) at commitMutationEffects (react-dom.development.js:23402:11) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:14) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16) at invokeGuardedCallback (react-dom.development.js:4056:31) at commitRootImpl (react-dom.development.js:23116:9) at unstable_runWithPriority (scheduler.development.js:468:12) at runWithPriority$1 (react-dom.development.js:11276:10) removeChildFromContainer @ react-dom.development.js:10307 unmountHostComponents @ react-dom.development.js:21289 commitDeletion @ react-dom.development.js:21342 commitMutationEffects @ react-dom.development.js:23402 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 commitRootImpl @ react-dom.development.js:23116 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 commitRoot @ react-dom.development.js:22985 performSyncWorkOnRoot @ react-dom.development.js:22324 eval @ react-dom.development.js:11327 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 flushSyncCallbackQueueImpl @ react-dom.development.js:11322 flushSyncCallbackQueue @ react-dom.development.js:11309 scheduleUpdateOnFiber @ react-dom.development.js:21888 enqueueSetState @ react-dom.development.js:12467 Component.setState @ react.development.js:365 eval @ index.jsx:493 Promise.then _callee$ @ index.jsx:137 tryCatch @ runtime.js:63 invoke @ runtime.js:294 eval @ runtime.js:119 asyncGeneratorStep @ asyncToGenerator.js:6 _next @ asyncToGenerator.js:28 Promise.then asyncGeneratorStep @ asyncToGenerator.js:16 _next @ asyncToGenerator.js:28 eval @ asyncToGenerator.js:35 eval @ asyncToGenerator.js:24 componentDidMount @ index.jsx:27 commitLifeCycles @ react-dom.development.js:20658 commitLayoutEffects @ react-dom.development.js:23421 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 commitRootImpl @ react-dom.development.js:23146 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 commitRoot @ react-dom.development.js:22985 performSyncWorkOnRoot @ react-dom.development.js:22324 eval @ react-dom.development.js:11327 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 flushSyncCallbackQueueImpl @ react-dom.development.js:11322 flushSyncCallbackQueue @ react-dom.development.js:11309 scheduleUpdateOnFiber @ react-dom.development.js:21888 enqueueSetState @ react-dom.development.js:12467 Component.setState @ react.development.js:365 _callee$ @ index.jsx:43 tryCatch @ runtime.js:63 invoke @ runtime.js:294 eval @ runtime.js:119 asyncGeneratorStep @ asyncToGenerator.js:6 _next @ asyncToGenerator.js:28 Promise.then asyncGeneratorStep @ asyncToGenerator.js:16 _next @ asyncToGenerator.js:28 eval @ asyncToGenerator.js:35 eval @ asyncToGenerator.js:24 componentDidMount @ index.jsx:34 commitLifeCycles @ react-dom.development.js:20658 commitLayoutEffects @ react-dom.development.js:23421 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 commitRootImpl @ react-dom.development.js:23146 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 commitRoot @ react-dom.development.js:22985 performSyncWorkOnRoot @ react-dom.development.js:22324 scheduleUpdateOnFiber @ react-dom.development.js:21876 updateContainer @ react-dom.development.js:25477 eval @ react-dom.development.js:26016 unbatchedUpdates @ react-dom.development.js:22426 legacyRenderSubtreeIntoContainer @ react-dom.development.js:26015 render @ react-dom.development.js:26098 eval @ index_full_view_new.js:33 ./src/entry/index_full_view_new.js @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:69 __webpack_require__ @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:98 (anonymous) @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:1304 __webpack_require__.O @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:145 (anonymous) @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:1305 (anonymous) @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:1307 index.jsx:493 The above error occurred in the <LayerMenu> component: at LayerMenu (webpack-internal:///./src/baseUI/LayerMenu/index.jsx:21:25) at LayerMenu (webpack-internal:///./src/components/mapEntrance/layermenu/index.jsx:66:86) at ConnectFunction (webpack-internal:///./node_modules/react-redux/es/components/connectAdvanced.js:232:68) at App (webpack-internal:///./src/components/mapCommon/index.jsx:71:86) at ConnectFunction (webpack-internal:///./node_modules/react-redux/es/components/connectAdvanced.js:232:68) at Map at FormProvider (webpack-internal:///./node_modules/rc-field-form/es/FormContext.js:19:31) at LocaleProvider (webpack-internal:///./node_modules/antd/es/locale-provider/index.js:33:90) at ProviderChildren (webpack-internal:///./node_modules/antd/es/config-provider/index.js:75:24) at LocaleReceiver (webpack-internal:///./node_modules/antd/es/locale-provider/LocaleReceiver.js:28:90) at ConfigProvider (webpack-internal:///./node_modules/antd/es/config-provider/index.js:183:13) at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:17:20) Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:20085 update.callback @ react-dom.development.js:20113 callCallback @ react-dom.development.js:12318 commitUpdateQueue @ react-dom.development.js:12339 commitLifeCycles @ react-dom.development.js:20731 commitLayoutEffects @ react-dom.development.js:23421 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 commitRootImpl @ react-dom.development.js:23146 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 commitRoot @ react-dom.development.js:22985 performSyncWorkOnRoot @ react-dom.development.js:22324 eval @ react-dom.development.js:11327 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 flushSyncCallbackQueueImpl @ react-dom.development.js:11322 flushSyncCallbackQueue @ react-dom.development.js:11309 scheduleUpdateOnFiber @ react-dom.development.js:21888 enqueueSetState @ react-dom.development.js:12467 Component.setState @ react.development.js:365 eval @ index.jsx:493 Promise.then _callee$ @ index.jsx:137 tryCatch @ runtime.js:63 invoke @ runtime.js:294 eval @ runtime.js:119 asyncGeneratorStep @ asyncToGenerator.js:6 _next @ asyncToGenerator.js:28 Promise.then asyncGeneratorStep @ asyncToGenerator.js:16 _next @ asyncToGenerator.js:28 eval @ asyncToGenerator.js:35 eval @ asyncToGenerator.js:24 componentDidMount @ index.jsx:27 commitLifeCycles @ react-dom.development.js:20658 commitLayoutEffects @ react-dom.development.js:23421 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 commitRootImpl @ react-dom.development.js:23146 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 commitRoot @ react-dom.development.js:22985 performSyncWorkOnRoot @ react-dom.development.js:22324 eval @ react-dom.development.js:11327 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 flushSyncCallbackQueueImpl @ react-dom.development.js:11322 flushSyncCallbackQueue @ react-dom.development.js:11309 scheduleUpdateOnFiber @ react-dom.development.js:21888 enqueueSetState @ react-dom.development.js:12467 Component.setState @ react.development.js:365 _callee$ @ index.jsx:43 tryCatch @ runtime.js:63 invoke @ runtime.js:294 eval @ runtime.js:119 asyncGeneratorStep @ asyncToGenerator.js:6 _next @ asyncToGenerator.js:28 Promise.then asyncGeneratorStep @ asyncToGenerator.js:16 _next @ asyncToGenerator.js:28 eval @ asyncToGenerator.js:35 eval @ asyncToGenerator.js:24 componentDidMount @ index.jsx:34 commitLifeCycles @ react-dom.development.js:20658 commitLayoutEffects @ react-dom.development.js:23421 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 commitRootImpl @ react-dom.development.js:23146 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 commitRoot @ react-dom.development.js:22985 performSyncWorkOnRoot @ react-dom.development.js:22324 scheduleUpdateOnFiber @ react-dom.development.js:21876 updateContainer @ react-dom.development.js:25477 eval @ react-dom.development.js:26016 unbatchedUpdates @ react-dom.development.js:22426 legacyRenderSubtreeIntoContainer @ react-dom.development.js:26015 render @ react-dom.development.js:26098 eval @ index_full_view_new.js:33 ./src/entry/index_full_view_new.js @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:69 __webpack_require__ @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:98 (anonymous) @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:1304 __webpack_require__.O @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:145 (anonymous) @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:1305 (anonymous) @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:1307 react-dom.development.js:20085 The above error occurred in the <Provider> component: at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:17:20) Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:20085 update.callback @ react-dom.development.js:20113 callCallback @ react-dom.development.js:12318 commitUpdateQueue @ react-dom.development.js:12339 commitLifeCycles @ react-dom.development.js:20731 commitLayoutEffects @ react-dom.development.js:23421 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 commitRootImpl @ react-dom.development.js:23146 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 commitRoot @ react-dom.development.js:22985 performSyncWorkOnRoot @ react-dom.development.js:22324 eval @ react-dom.development.js:11327 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 flushSyncCallbackQueueImpl @ react-dom.development.js:11322 flushSyncCallbackQueue @ react-dom.development.js:11309 workLoop @ scheduler.development.js:417 flushWork @ scheduler.development.js:390 performWorkUntilDeadline @ scheduler.development.js:157 scheduler.development.js:171 Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. at removeChildFromContainer (react-dom.development.js:10307:15) at unmountHostComponents (react-dom.development.js:21289:9) at commitDeletion (react-dom.development.js:21342:5) at commitMutationEffects (react-dom.development.js:23402:11) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:14) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16) at invokeGuardedCallback (react-dom.development.js:4056:31) at commitRootImpl (react-dom.development.js:23116:9) at unstable_runWithPriority (scheduler.development.js:468:12) at runWithPriority$1 (react-dom.development.js:11276:10) removeChildFromContainer @ react-dom.development.js:10307 unmountHostComponents @ react-dom.development.js:21289 commitDeletion @ react-dom.development.js:21342 commitMutationEffects @ react-dom.development.js:23402 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 commitRootImpl @ react-dom.development.js:23116 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 commitRoot @ react-dom.development.js:22985 performSyncWorkOnRoot @ react-dom.development.js:22324 eval @ react-dom.development.js:11327 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 flushSyncCallbackQueueImpl @ react-dom.development.js:11322 flushSyncCallbackQueue @ react-dom.development.js:11309 scheduleUpdateOnFiber @ react-dom.development.js:21888 enqueueSetState @ react-dom.development.js:12467 Component.setState @ react.development.js:365 eval @ index.jsx:493 Promise.then _callee$ @ index.jsx:137 tryCatch @ runtime.js:63 invoke @ runtime.js:294 eval @ runtime.js:119 asyncGeneratorStep @ asyncToGenerator.js:6 _next @ asyncToGenerator.js:28 Promise.then asyncGeneratorStep @ asyncToGenerator.js:16 _next @ asyncToGenerator.js:28 eval @ asyncToGenerator.js:35 eval @ asyncToGenerator.js:24 componentDidMount @ index.jsx:27 commitLifeCycles @ react-dom.development.js:20658 commitLayoutEffects @ react-dom.development.js:23421 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 commitRootImpl @ react-dom.development.js:23146 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 commitRoot @ react-dom.development.js:22985 performSyncWorkOnRoot @ react-dom.development.js:22324 eval @ react-dom.development.js:11327 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 flushSyncCallbackQueueImpl @ react-dom.development.js:11322 flushSyncCallbackQueue @ react-dom.development.js:11309 scheduleUpdateOnFiber @ react-dom.development.js:21888 enqueueSetState @ react-dom.development.js:12467 Component.setState @ react.development.js:365 _callee$ @ index.jsx:43 tryCatch @ runtime.js:63 invoke @ runtime.js:294 eval @ runtime.js:119 asyncGeneratorStep @ asyncToGenerator.js:6 _next @ asyncToGenerator.js:28 Promise.then asyncGeneratorStep @ asyncToGenerator.js:16 _next @ asyncToGenerator.js:28 eval @ asyncToGenerator.js:35 eval @ asyncToGenerator.js:24 componentDidMount @ index.jsx:34 commitLifeCycles @ react-dom.development.js:20658 commitLayoutEffects @ react-dom.development.js:23421 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 commitRootImpl @ react-dom.development.js:23146 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 commitRoot @ react-dom.development.js:22985 performSyncWorkOnRoot @ react-dom.development.js:22324 scheduleUpdateOnFiber @ react-dom.development.js:21876 updateContainer @ react-dom.development.js:25477 eval @ react-dom.development.js:26016 unbatchedUpdates @ react-dom.development.js:22426 legacyRenderSubtreeIntoContainer @ react-dom.development.js:26015 render @ react-dom.development.js:26098 eval @ index_full_view_new.js:33 ./src/entry/index_full_view_new.js @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:69 __webpack_require__ @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:98 (anonymous) @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:1304 __webpack_require__.O @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:145 (anonymous) @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:1305 (anonymous) @ index_full_view_new.530122.js?5adafe2ecde3d31e63f5:1307 chunk-common.a077d8.js?5adafe2ecde3d31e63f5:5460 Uncaught (in promise) Error: Cannot find module './vehicleMounted.png' at webpackContextResolve (chunk-common.a077d8.js?5adafe2ecde3d31e63f5:5460:11) at webpackContext (chunk-common.a077d8.js?5adafe2ecde3d31e63f5:5455:11) at eval (index.jsx:79:29) at Array.map (<anonymous>) at LayerMenu (index.jsx:70:22) at renderWithHooks (react-dom.development.js:14985:18) at updateFunctionComponent (react-dom.development.js:17356:20) at beginWork (react-dom.development.js:19063:16) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:14) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)项目成功启动后页面显示不出来报这种错误
最新发布
11-01
对于项目成功启动后页面显示不出来,出现 `Uncaught Error: Cannot find module './vehicleMounted.png'` 和 `Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node'` 错误,可按以下思路解决: ### 解决 `Uncaught Error: Cannot find module './vehicleMounted.png'` - **检查文件路径**:确保 `vehicleMounted.png` 文件确实存在于指定路径下,并且路径大小写与实际文件系统一致,因为在某些系统中,文件路径是区分大小写的。 - **检查导入语句**:确认在代码中导入图片的语句是否正确。如果使用的是 Webpack 等打包工具,可能需要调整导入规则。例如在 Vue 项目中,正确的导入方式可能是 `import vehicleMounted from './vehicleMounted.png'`。 - **配置打包工具**:如果使用了打包工具,需要检查其配置文件,确保对图片文件的处理规则正确。以 Webpack 为例,需要配置 `file-loader` 或 `url-loader` 来处理图片文件。示例配置如下: ```javascript module.exports = { module: { rules: [ { test: /\.(png|jpg|jpeg|gif)$/i, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'images/' } } ] } ] } }; ``` ### 解决 `Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node'` - **检查节点是否存在**:该错误通常表示要移除的节点不是其父节点的子节点。在代码中使用 `removeChild` 方法之前,需要确保要移除的节点确实是其父节点的子节点。可以通过 `contains` 方法进行检查,示例代码如下: ```javascript const parentNode = document.getElementById('parent'); const childNode = document.getElementById('child'); if (parentNode.contains(childNode)) { parentNode.removeChild(childNode); } ``` - **异步操作问题**:如果代码中存在异步操作,可能会导致节点在移除时已经被修改或移除。需要确保在移除节点时,节点仍然存在于其父节点中。可以使用 `try...catch` 语句捕获错误,避免程序崩溃,示例代码如下: ```javascript try { const parentNode = document.getElementById('parent'); const childNode = document.getElementById('child'); parentNode.removeChild(childNode); } catch (error) { console.error('移除节点时出错:', error); } ```
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值