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

【问题标题】：Render happens before the request using useEffect渲染发生在使用 useEffect 的请求之前
【发布时间】：2021-01-04 10:37:13
【问题描述】：

我需要在渲染前提出请求。请求数据将以 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

中的日志之前

【问题讨论】：

根据 React 文档 (reactjs.org/docs/hooks-effect.html)，“useEffect”钩子旨在处理组件渲染后后的副作用。如果你想坚持使用功能组件，你需要依赖条件渲染，根据@ysvet 的回答。

标签： reactjs redux react-hooks react-router-dom

【解决方案1】：

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

【讨论】：