Question

无法更新组件内部的状态并挂载钩子，甚至尝试使用useLayoutEffect仍然没有解决办法

<p>STUDY works!!!!!</p>
<app-study1></app-study1>

Answer 1

使用() => getScreen()时，您仅将函数定义作为setScreen的值传递。相反，您需要调用该函数。请尝试以下操作：

const [curScreen, setScreen] = useState("large-desktop");

useEffect(() => {
  const getScreen = () => {
      let size = window.innerWidth;
      if (size < 600) return "mobile";
      else if (size < 1200) return "tablet";
      else if (size < 1800) return "desktop";
      else return "large-desktop";
  };

  setScreen(getScreen());
}, []);

或者在实例化useState()后尝试调用函数：

const [curScreen, setScreen] = useState(getScreen());

查看示例的完整代码：

function getScreen() {
    let size = window.innerWidth;
    if (size < 600) return "mobile";
    else if (size < 1200) return "tablet";
    else if (size < 1800) return "desktop";
    else return "large-desktop";
}

function App() {
  const [curScreen, setScreen] = useState(getScreen());

  return (
    <div className="App">
      ...
    </div>
  );
}

我希望这会有所帮助！

无法更新组件挂载钩子反应的状态

1 个答案: