时间戳

首页 > 解决方案 > 渲染发生在使用 useEffect 的请求之前

reactjs - 渲染发生在使用 useEffect 的请求之前

问题描述

我需要在渲染之前提出请求。请求数据将以 redux 状态存储。因为它是我的 App.js，它包含应用程序的必要路由。但是，路由的呈现发生在 useEffect 中发出请求之前。有谁能够帮助我？在渲染路由或其他任何内容之前，我需要以 redux 状态保存的请求数据。

应用程序.js

const App = () => {

  const dispatch = useDispatch()
  const setData = (data) => dispatch(actions.setData(data))

  const fetchData = async () => {
    await axios.get('https://link-api.com/')
      .then((response) => {
        console.log(response.data)
        setData(response.data)
      })
      .catch(function (error) {
        console.log(error);
      })
  }

  useEffect(() => {
    fetchData();
  }, []);

  return (
      <Router>

        <Header />
          <Switch>
            <Route path="/page4/:id" component={Page4} />
            <Route path="/page3" component={Page3} />
            <Route path="/page2" component={Page2} />
            <Route path="/" component={Home} />
          </Switch>

      </Router>
  );
}

export default App

主页.js

const Home= () => {

    const data = useSelector(state => state.myReducers.data)

    useEffect(() => {
            console.log("data")
         }
      }, []);

    return (
        <>
          //view_home
        </>
    )
}

export default Home

示例：在这种情况下，Home.js 的useEffect中插入的日志甚至出现在App.js中插入的日志之前

标签： reactjsreduxreact-hooksreact-router-dom

解决方案

如果您必须在渲染之前获取某些东西 - 考虑条件渲染。例如添加一个保持加载状态的新状态。最初将其设置为 true，当获取数据时 - 将其设置为 false。当它是错误的 - 渲染你需要的任何东西。

推荐阅读