React实战梳理

1、常见问题

1. creat-react-app初始化工程后，启动报错，控制台报错 Uncaught TypeError: Cannot read property 'forEach' of undefined at Object.injectIntoGlobalHook (react-refresh-runtime.development.js:465)

解决方法：安装了 Chrome 扩展程序 [React Developer Tools]， 禁用它，然后重新运行项目

Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')
    at Object.injectIntoGlobalHook (react-refresh-runtime.development.js:488)
    at Object../node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js (ReactRefreshEntry.js:17)
    at Object.options.factory (react refresh:6)
    at __webpack_require__ (bootstrap:24)
    at startup:4
    at startup:7

2. 允许eject命令报错，This git repository has untracked files or uncommitted changes

解决方法：git add . && git commit -am "Save before ejecting"

3. webpack编译报错：configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$"

解决方法：webpack4中sourcemap的配置转换为webpack5的配置后解决

devtool: 'cheap-module-eval-source-map' -> devtool: 'eval-cheap-module-source-map'

4. 函数组件使用报错：Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

解决方法：App为导出的函数组件，<Route path="/*" element={App}/> -> <Route path="/*" element={<App/>}/>

5. react在src目录配置setupProxy.js后无法启动，提示无法访问此网络

解决方法：http-proxy-middleware版本不匹配问题，改为高版本配置后解决

//低版本配置
const proxy = require('http-proxy-middleware');
	module.exports = function(app) {
    app.use(proxy('/api/**/*.action', {
         target: 'http://localhost:4000',
         pathRewrite(path) {
             return path.replace('/api', '/').replace('.action', '.json');
         }
    }));
};

//高版本配置
const { createProxyMiddleware } = require("http-proxy-middleware")
	module.exports = function(app) {
    app.use(createProxyMiddleware('/api/**/*.action', {
        target: 'http://localhost:4000',
        pathRewrite(path) {
            return path.replace('/api', '/').replace('.action', '.json');
        }
    }));
};