無法更新組件中的 state 是否掛載掛鈎反應

Question

無法更新 state 內部組件確實掛載鈎子，甚至嘗試使用 useLayoutEffect，仍然沒有解決方案

function App() {
  const [curScreen, setScreen] = useState("large-desktop");
  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";
  };

  //useEffect
  useEffect(() => {
    setScreen(() => getScreen());
  }, []);

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

Answer 1

使用() => getScreen()您將 function 定義作為setScreen的值傳遞。 相反，您需要調用 function。 嘗試如下：

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()后嘗試調用 function ：

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>
  );
}

我希望這有幫助！