警告：无法从 React Native 中不同组件的函数体内更新组件

Question

我有调用所有数据函数的加载屏幕。我使用异步函数进行所有函数调用。

//NOTE: this screen loads all the data and store it in store so user will have a smother experience
const LoadingScreen = (props) => {
  const gotToHomeScreen = () => {
    props.navigation.replace("Home", { screen: HOME_SCREEN });
  };
  //NOTE: loading data here for home screen journey
  const getRequiredAPIDataInStore = async () => {
    GetAllFieldProp();
    GetAllSalaryAPIResponse();
    GetSalaryAPIResponse();
    let { spinnerStateForm101 } = GetForm101API();
    let { spinnerStateForm106 } = GetForm106API();
    GetMessagesCountAPI();
    GetMessagesAPI(props);
    GetAllFormAPIResponse();
    GetAllSpecificSalaryAPIResponse();
    let { spinnerStateMonthly } = GetMonthlyAbsenceAPI(props);
    let { spinnerStateWeekly } = GetWeeklyAbsenceAPI(props);

    if (
      spinnerStateMonthly &&
      spinnerStateWeekly &&
      spinnerStateForm106 &&
      spinnerStateForm101
    ) {
      gotToHomeScreen();
    }
  };

  getRequiredAPIDataInStore();

export default LoadingScreen;

但我收到了警告消息。

Warning: Cannot update a component from inside the function body of a different component.
at src/screens/loading-screen.js:19:26 in gotToHomeScreen
at src/screens/loading-screen.js:37:6 in getRequiredAPIDataInStore

如何解决这个警告信息？

Answer 1

这是我将采取的方法。

const Loading = () => {
 const [spinnerStateMonthly, setSpinnerStatMonthly] = useState(null);
 const [spinnerStateWeekly, setspinnerStateWeekly] = useState(null);
 const [spinnerStateForm106, setspinnerStateForm106] = useState(null);
 const [spinnerStateForm101, setSpinnerStateForm101] = useState(null);

 const gotToHomeScreen = () => {
   props.navigation.replace("Home", { screen: HOME_SCREEN });
 };

 useEffect(() => {
  // async callback to get all the data and set state
  (async () => {
   await GetAllFieldProp();
   await GetAllSalaryAPIResponse();
   await GetSalaryAPIResponse();
   const { spinnerStateForm101: local101  } = GetForm101API();
   const { spinnerStateForm106: local106 } = GetForm106API();
   setSpinnerStateForm101(local101);
   setSpinnerStateForm106(local106);

   await GetMessagesCountAPI();
   await GetMessagesAPI(props);
   await GetAllFormAPIResponse();
   await GetAllSpecificSalaryAPIResponse();
   const { spinnerStateMonthly: localMonthly } = GetMonthlyAbsenceAPI(props);
   const { spinnerStateWeekly: localWeekly } = GetWeeklyAbsenceAPI(props);
   setSpinnerStateMonthly(localMonthly);
   setSpinnerStateWeekly(localWeekly);
 })();
}, []);


// effect to check for what the state is and if all the states are satisfied 
// then go to the home screen
useEffect(() => {
     if (spinnerStateMonthly 
         && spinnerStateWeekly 
         && spinnerStateForm106 
         && spinnerStateForm101) {
           gotToHomeScreen();
     }
   }, [spinnerStateMonthly, spinnerStateWeekly, spinnerStateForm101, 
       spinnerStateForm106]);


};