Javascript useState不反映更改

单击按钮，div模拟一张纸，应将方向从垂直更改为水平。原因是什么？依赖于另一个字段的状态字段是不正确的，并且由于异步性质，我得到了这个意外的结果？考虑到这是我用例的简化示例，我需要这两个字段

import { useState } from "react";

export default function App() {
  const [verticalOrientation, setOrientation] = useState(true);
  const [dimensions] = useState(getDimensions(verticalOrientation));

  const style = {
    width: dimensions.width,
    height: dimensions.height,
    borderStyle: "solid",
  };
  console.log(verticalOrientation);
  return (
    <div style={style}>
      <h1>Sheet  of paper</h1>
      <button onClick={() => setOrientation(!verticalOrientation)}>
        Change orientation
      </button>
    </div>
  );
}

const getDimensions = (verticalOrientation) => {
  const proportion = verticalOrientation ? 16 / 9 : 9 / 16; // A4 vertical vs horizontal
  let width = 300;
  let height = proportion * width;
  console.log(height, proportion, verticalOrientation);

  return { width, height };
};

维度不应该是有状态的，因为它没有被调用的状态设置器——它只依赖于VerticalEntation的其他有状态值。所以维度应该是组件中本地声明的普通变量。如果你想的话，你可以把它用便笺纸包起来

export default function App() {
  const [verticalOrientation, setOrientation] = useState(true);
  const dimensions = getDimensions(verticalOrientation);
  // ...

常量应用==>{ const[VerticalEntation，setOrientation]=React.useStatetrue； const dimensions=获取维度垂直热量； 常量样式={ 宽度：尺寸。宽度， 高度：尺寸。高度， 边框样式：实心， }; 回来 一张纸 setOrientation！VerticalEntation}> 改变方向 ; } const getDimensions=verticalentation=>{ 常量比例=垂直热值？16/9:9/16；//A4垂直与水平 宽度=300； 高度=比例*宽度； 返回{宽度，高度}； }; ReactDOM.render，document.querySelector'.react'； 维度不应该是有状态的，因为它没有被调用的状态设置器——它只依赖于VerticalEntation的其他有状态值。所以维度应该是组件中本地声明的普通变量。如果你想的话，你可以把它用便笺纸包起来

export default function App() {
  const [verticalOrientation, setOrientation] = useState(true);
  const dimensions = getDimensions(verticalOrientation);
  // ...

常量应用==>{ const[VerticalEntation，setOrientation]=React.useStatetrue； const dimensions=获取维度垂直热量； 常量样式={ 宽度：尺寸。宽度， 高度：尺寸。高度， 边框样式：实心， }; 回来 一张纸 setOrientation！VerticalEntation}> 改变方向 ; } const getDimensions=verticalentation=>{ 常量比例=垂直热值？16/9:9/16；//A4垂直与水平 宽度=300； 高度=比例*宽度； 返回{宽度，高度}； }; ReactDOM.render，document.querySelector'.react'；

---

在实际情况中，我使用了一个设置器来设置维度，以防用户调整窗口我升级维度状态字段来强制渲染。在一个带有空依赖项数组的效果挂钩中，您可以向设置状态的窗口添加一个调整大小侦听器，在该窗口中，getDimensions计算从该状态获取值，以计算返回的内容。例如，代替window.innerWidth->getDimensions，您可以使用effect->setWidthwindow.innerWidth->getDimensions，如下所示：是的，我喜欢这样，并且可以调整大小。但不是什么时候。我在上面的简化代码中单击按钮。在实际情况中，我正在使用一个设置器来设置维度，以防用户调整大小窗口我升级维度状态字段来强制渲染。在带有空依赖项数组的效果挂钩中，您可以向设置状态的窗口添加一个调整大小侦听器，其中getDimensions计算从该状态获取值，以计算返回的内容。例如，代替window.innerWidth->getDimensions，您可以使用effect->setWidthwindow.innerWidth->getDimensions，如下所示：是的，我喜欢这样，并且可以调整大小。但不是什么时候。我点击按钮，就像上面我的简化代码一样。