reactjs React useWindowSize挂钩在没有CRA的项目中不再起作用

a2mppw5e  于 2022-11-22  发布在  React
关注(0)|答案(1)|浏览(140)

这个简单的钩子应该返回窗口的宽度和高度。我在一个项目中做了这个钩子,我在那里使用了CRA,我没有遇到任何问题。在当前的项目中,我没有使用CRA,以便更好地理解react是如何工作的。因此,我认为我收到的错误可能与我的webpack配置或依赖关系有关。
Uncaught TypeError: can't access property "type", currentEvent is null

import { useState, useEffect } from "react";

export default function useWindowSize() {
    const [windowSize, setWindowSize] = useState({
        width: undefined,
        height: undefined,
    });

    useEffect(() => {
        const handleResize = () =>
            setWindowSize({ width: window.innerWidth, height: window.innerHeight });
        window.addEventListener("resize", handleResize);
        handleResize();
        return () => window.removeEventListener("resize", handleResize);
    }, []);

    return windowSize;
}

WEBPACK.CONFIG.JS

const path = require("path");
const HTMLWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./src/index.jsx",

    output: {
        path: path.join(__dirname, "/dist"),
        filename: "bundle.js",
    },

    plugins: [
        new HTMLWebpackPlugin({
            template: "./public/index.html",
        }),
    ],

    module: {
        rules: [
            {
                test: /\.jsx|js$/,
                include: path.resolve(__dirname, "src"),
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    targets: "defaults",
                                },
                            ],
                            "@babel/preset-react",
                        ],
                    },
                },
            },
            {
                test: /\.(jpe?g|png|ico|svg|gif)$/i,
                use: {
                    loader: "file-loader",
                    options: { name: "[name].[ext]" },
                },
            },
            { test: /\.css$/, use: ["style-loader", "css-loader"] },
        ],
    },
};

PACKAGE.JSON

{
"name": "cra",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
    "css-loader": "^6.7.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "style-loader": "^3.3.1"
},
"devDependencies": {
    "@babel/core": "^7.20.2",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^9.1.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
}

}

EDIT:我应该提到,我在初始渲染时收到窗口大小,当我实际尝试调整窗口大小时发生错误

我尝试了很多事情来理解这个问题,但是我仍然没有成功的解决它。任何帮助将不胜感激。

y1aodyip

y1aodyip1#

对于任何面临类似问题的人,您都需要useState()的这个依赖项
npm安装响应刷新-D

相关问题