Не удалось обновить состояние в компоненте

Question

Невозможно обновить состояние внутри компонента, который монтировал ловушку, даже пытался использовать 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() вы передаете определение функции как значение только для 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>
  );
}

Надеюсь, это поможет!