这个简单的钩子应该返回窗口的宽度和高度。我在一个项目中做了这个钩子,我在那里使用了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:我应该提到,我在初始渲染时收到窗口大小,当我实际尝试调整窗口大小时发生错误
我尝试了很多事情来理解这个问题,但是我仍然没有成功的解决它。任何帮助将不胜感激。
1条答案
按热度按时间y1aodyip1#
对于任何面临类似问题的人,您都需要useState()的这个依赖项
npm安装响应刷新-D