reactjs 如何在渲染React应用程序之前预加载数据

aiqt4smr 于 2023-06-22 发布在 React

关注(0)|答案(2)|浏览(132)

我使用React Location Library。想要从cookie中获取令牌，如果它存在，然后将其发送到服务器以检查它是否是活动的。我的问题是我怎么能做到这一点之前，渲染应用程序，而不管路由？
我试过这样的东西，但它只适用于特定的路线

{
        path: '/',
        element: () => import('../pages/Main').then(mod => <mod.default />),
        loader: async () => {
            return {
                user: await fetchResource('user', {}, true)
            };
        }
    },

reactjs

来源：https://stackoverflow.com/questions/72246814/how-to-preload-data-before-rendering-react-app

2条答案

按热度按时间

thigvfpy1#

在App.js中，你可以这样做

const [ready, setReady] = useState(false);
useEffect(()=>{
  // fetch your token and verify
  setReady(true)
  },[]);

return (
  {
    ready ? (
      // Your app components here
    ) : (
       <div> Loading .... </div>
    )
  }
)

赞(0）回复(0）举报 2023-06-22

t5fffqht2#

你可以用这个代码来举例：

const [text, setText] = useState("")
const [loading, setLoading] = useState();
const fetchdata = () => {
  setLoading(true)
  fetch("youurl is here")
    .then((res) => res.json())
    .then((data) => setText(data.title))
  setLoading(false)
}

然后在你的组件中写出条件：

<div className='App'>
  <button onClick={fetchdata}>Fetch Data</button>
  {loading ? <p>loading</p> : <p>{text}</p>}
</div>

当然，你应该使用useEffect钩子来获取数据

赞(0）回复(0）举报 2023-06-22

我来回答

reactjs 如何在渲染React应用程序之前预加载数据

2条答案

相关问题

热门标签

最新问答