nextjs按钮在第二次单击时显示useState更改

Question

热衷于学习nextjs。

我希望能够有一个显示窗口宽度和高度的组件，单击时在按钮上显示tailwindcss断点，作为连续显示的垫脚石。我决定，单击一个按钮来显示当前窗口的宽度和高度会比设置一个事件侦听器来连续更改显示的值更容易。我还想展示当前的"；断点"；值。

此处显示了所用软件包的版本。

"dependencies": {
"axios": "^1.1.2",
"daisyui": "^2.31.0",
"gray-matter": "^4.0.3",
"marked": "^4.1.1",
"next": "12.3.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.4.0"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.7",
"autoprefixer": "^10.4.12",
"eslint": "^8.25.0",
"eslint-config-next": "12.3.1",
"postcss": "^8.4.17",
"tailwindcss": "^3.1.8"
}

组件WidthHeightButton.js在这里：

export default function WidthHeightButton() {

const [widthParam, setWidth] = useState(55)
const [heightParam, setHeight] = useState(55)
const [tailwindBreakpoint, setTailwindBreakpoint] = useState("empty")
console.log("[WidthHeightButton] check array used to destructure setWidth is a function:", typeof setWidth)
function handleClick() {
console.log("[WidthHeightButton] width x height:", window.innerWidth, "x", window.innerHeight)
setWidth(window.innerWidth)
setHeight(window.innerHeight)
console.log("typeof widthParam:", typeof widthParam, widthParam)
let breakpoint = ""
if (widthParam >= 1536) {
breakpoint = "2xl"
} else if (widthParam >= 1280) {
breakpoint = "xl"
} else if (widthParam >= 1024) {
breakpoint ="lg"
} else if (widthParam >= 768) {
breakpoint = "md"
} else if (widthParam >= 640) {
breakpoint = "sm"
} else {
breakpoint = "default"
}
setTailwindBreakpoint(breakpoint)
}
return (
<button onClick={handleClick} className="my-6 btn btn-secondary">
width x height: {widthParam} x {heightParam} {tailwindBreakpoint}
</button>
)

}

然后我用调用该组件它显示宽度x高度：55 x 55空(我的默认值(

我点击按钮。

它显示宽度x高度：677 x 918 DEFAULT(宽度和高度是正确的，但不是断点。(

我再次点击按钮。

显示宽度x高度：677 x 918 SM(正确(

为什么需要点击两次？

为了回应我对这一差距的理解，我想看看改变操作顺序是否会得到更好的结果：

import { useState } from "react"
export default function WidthHeightButton() {
const [widthParam, setWidth] = useState(55)
const [heightParam, setHeight] = useState(55)
const [tailwindBreakpoint, setTailwindBreakpoint] = useState("empty")
console.log("[AnotherButton] check array used to destructure setWidth is a function:", typeof setWidth)
function handleClick() {
console.log("[AnotherButton] width x height:", window.innerWidth, "x", window.innerHeight)
let breakpoint = ""
if (window.innerWidth >= 1536) {
breakpoint = "2xl"
} else if (window.innerWidth >= 1280) {
breakpoint = "xl"
} else if (window.innerWidth >= 1024) {
breakpoint ="lg"
} else if (window.innerWidth >= 768) {
breakpoint = "md"
} else if (window.innerWidth >= 640) {
breakpoint = "sm"
} else {
breakpoint = "default"
}
setWidth(window.innerWidth)
setHeight(window.innerHeight)
setTailwindBreakpoint(breakpoint)

console.log("typeof widthParam:", typeof widthParam, widthParam)


}

return (
<button onClick={handleClick} className="my-6 btn btn-secondary">
width x height: {widthParam} x {heightParam} {tailwindBreakpoint}
</button>
)
}

受您回答的启发，我想看看是否可以停止使用一个状态变量(widthParam(来确定另一个状态参数(tailwindBreakpoint(。这是我提出的问题的一个解决方案，只需单击一个按钮就能得到正确的显示。我必须把重点放在这里给出的精彩回应上。我不确定这个回答是否是对我问题的合理回答，但也许这是朝着正确方向迈出的一小步。

Answer 1

运行setWidth时，width将在下一个渲染周期中更改为新值。记住常量是不变的。

function handleClick() {
console.log("[AnotherButton] width x height:", window.innerWidth, "x", window.innerHeight)
setWidth(window.innerWidth)
setHeight(window.innerHeight)
let breakpoint = ""
if (window.innerWidth>= 1536) {
breakpoint = "2xl"
} else if (window.innerWidth >= 1280) {
breakpoint = "xl"
} else if (window.innerWidth>= 1024) {
breakpoint ="lg"
} else if (window.innerWidth>= 768) {
breakpoint = "md"
} else if (window.innerWidth>= 640) {
breakpoint = "sm"
} else {
breakpoint = "default"
}
setTailwindBreakpoint(breakpoint)
}

Answer 2

您可以在useEffect中调用handleClick函数，并将window.innerWidth和window.innerHeight作为依赖项，而不是在单击按钮时调用它。

或

提供宽度和高度的初始值作为window.innerWidth和window.innerHeight。并将它们用作依赖项。