Question

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

App.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

Home.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

中的日志之前。

Answer 1

在必须在渲染之前获取某些内容的情况下-考虑条件渲染。例如，添加一个新状态以保持加载状态。首先将其设置为true，然后在获取数据时将其设置为false。而且当它为假时-渲染任何您需要的东西。

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

1 个答案: