Question

我正在将React Lifecycles转换为Hooks。在运行axios和商店配置之前，App.js页面正在加载首页的数据。因此，api中使用了错误的axios.baseURL。

我用useEffect替换了componentWillMount，但是它在第一个加载页面上使用的useEffect之后运行。

APP.JS

const App = () => {
useEffect(() => {
    (async () => await AxiosConfig.init())();
}, []);

useEffect(() => {
    (async () => await Store.init())();
}, []);

return (
    <Provider store={store}>
        <Router>
          <Switch>
            ...
          </Switch>
        </Router>
    </Provider>
);

}

加载页面

const [data, setData] = useState(null);    

const getData = useCallback(filters => {
    (async () => {
      try {
        let response = await DataService.getAllData(filters);
        if (response && response.status === 200) {
          let data = response.data && response.data.result;
          setData(data);
        }
      } catch (error) {
        ...
      }
    })();
  }, []);

  useEffect(() => getData(filters), [filters, getData]);

<List data={data} />

我该如何确定时间以使配置首先运行？我是否需要将调用合并到一个useEffect中，在成功响应时设置一个标志，并且仅在flag = true时才返回App.js DOM？

如何确定React useEffect计时？

0 个答案: