React 中的三元运算符仅在移动设备上停留在第一个条件

Question

我在 React 中有一个应用程序，我正在使用加载器占位符，直到通过 Promise 和异步函数提取我的数据。

使用以下代码在任何计算机上都可以正常工作，但在移动设备上加载时，它仅显示加载程序，并且在加载数据时不会移过去。

三元运算的移动处理是否存在导致此问题的原因？

这是我正在使用的代码，它在电脑网络浏览器上运行良好，并根据需要显示第二个条件，在移动设备上它不会超过第一个条件。

数据加载后设置加载值

  const [mylat, setLat] = useState("");
  const [mylong, setLong] = useState("");
  const [loading, setLoading] = useState(true);

  window.onload = async () => {
    const coords = await getCoords(() => {
      return;
    })
    setLat(coords.lat);
    setLong(coords.long);
    setLoading(false);
  }

返回值

return (
    <div className="App">
      { loading ? (

        <header className="App-header">
          <div className="masterLoader">
            {MyLoader()}
          </div>      
        </header>

      ) : (
        
        <header className="App-header">
          <MyC msg={myMsg} icon={myIcon} />
          <div className="mapWrapper">
            <PostMap lat={mylat} long={mylong} />
          </div>
          <Posts ip={ip} mlat={mylat} mlong={mylong} />
          <div id="logo"></div>
          <span id="page-bottom"></span>
        </header>

      )}
    </div>
  )

Answer 1

根据 @ataman 评论的建议，我使用 useEffect() 而不是 winow.onload，它适用于 Web 浏览器、PC 和移动设备。