Javascript React-onClick不在任何组件中工作

我是个新手，我的项目有些问题。我觉得自己快要疯了，最简单的事情都没有按我的预期去做。在重读了数百遍我的代码之后，我仍然无法明白到底是什么问题。具体来说，我正在测试一个带有onClick函数的简单按钮（onClick={（）=>console.log（“test”）}）。该按钮渲染良好，但单击它不会在控制台中记录任何内容

我也在使用Webpack和Express（尽管我怀疑Express在这一点上会引起任何问题）

我曾试图寻找类似的问题，但迄今为止没有任何帮助

下面是我的index.jsx：

import React from 'react';
import ReactDOM from 'react-dom';

import styles from './index.module.scss';

function App() {
    return (
        <>
            <button onClick={() => console.log("Working")} >Test</button>
        </>
    )
}

ReactDOM.render((
    <App />
), document.getElementById('root'));

module.hot.accept();

我还使用此小批量脚本运行webpack dev服务器并启动Express：

@echo off
cd %~dp0
start cmd.exe /k npm run serve
start node ./express/app.js
npm run build -- --watch

，但React-dev工具显示“App”被渲染了3次。我不确定这是否是开发工具的一些怪癖，或者它是否会导致一些问题。再一次，我试图找出是否有人经历过类似的事情，但没有找到任何东西

---

我很高兴与大家分享可能需要的任何其他信息，以便弄清这件事的真相。提前感谢您提供的任何帮助。

您要导入index.bundle.js两次，请尝试在index.ejs中取消对脚本的注释，因为webpack会自动导入脚本，这应该可以解决您的问题

const path                      = require('path');
const HtmlWebpackPlugin         = require('html-webpack-plugin');
const { CleanWebpackPlugin }    = require('clean-webpack-plugin');
const webpack                   = require('webpack');

module.exports = (env, args) => {
    
    return {
        entry: './src/index.jsx',
        ...(options()),
        module: {
            rules: [
                {
                    test: /\.css$/i,
                    use: ['style-loader', 'css-loader'],
                },
                {
                    test: /\.scss$/i,
                    use: ['style-loader', 'css-loader', 'sass-loader'],
                },
                {
                    test: /\.(png|svg|jpg|jpeg|gif)$/i,
                    type: 'asset/resource',
                },
                {
                    test: /\.(woff|woff2|eot|ttf|otf)$/i,
                    type: 'asset/resource',
                },
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: ['babel-loader'],
                },
            ],
        },
        resolve: {
            extensions: ['*', '.js', '.jsx'],
        },
        plugins: plugins(),
        output: {
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, 'dist'),
            clean: true,
        }
    };
};

const plugins = () => {
    const resOut = path.resolve(__dirname, 'dist');

    const plugs = [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: [resOut],
            dry: false,
        }),
        new HtmlWebpackPlugin({
            hash: true,
            filename: path.resolve(resOut, 'index.html'),
            template: './src/index.ejs',
        })
    ]

    return plugs;
}

const options = () => {
    
    const ops = {
        mode: 'development',
        devtool: 'eval-source-map',
        devServer: {
            contentBase: path.resolve(__dirname, 'dist'),
            compress: true,
            port: 9000,
            historyApiFallback: true,
            openPage: '',
            hot: true,
            proxy: {
                '/api/**' : {
                    target: 'http://localhost:3000',
                    secure: false,
                }
            },
            allowedHosts: [
                'localhost',
            ]
        },
    };

    return ops;
}

@echo off
cd %~dp0
start cmd.exe /k npm run serve
start node ./express/app.js
npm run build -- --watch