Предупреждение: Не удается обновить компонент из тела функции другого компонента в React Native

#reactjs #react-native #react-redux #react-hooks

#реагирует на #реагировать-родной #реагировать-переделывать #реагируют-крючки

Вопрос:

у меня есть экран загрузки для вызова всех функций передачи данных.я использовал асинхронную функцию для всех вызовов функций.

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

Как решить эту проблему с предупреждением?

Комментарии:

1. Я подозреваю, что причина, по которой вы получаете эти предупреждения, заключается в том, что вы не ожидаете своих async функций. Таким образом, вы переходите с экрана загрузки на главный экран, одновременно пытаясь установить состояние на экране загрузки. Смотрите мой ответ ниже для лучшего решения

Ответ №1:

Вот подход, который я бы выбрал.

 const Loading = () =gt; {  const [spinnerStateMonthly, setSpinnerStatMonthly] = useState(null);  const [spinnerStateWeekly, setspinnerStateWeekly] = useState(null);  const [spinnerStateForm106, setspinnerStateForm106] = useState(null);  const [spinnerStateForm101, setSpinnerStateForm101] = useState(null);   const gotToHomeScreen = () =gt; {  props.navigation.replace("Home", { screen: HOME_SCREEN });  };   useEffect(() =gt; {  // async callback to get all the data and set state  (async () =gt; {  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(() =gt; {  if (spinnerStateMonthly   amp;amp; spinnerStateWeekly   amp;amp; spinnerStateForm106   amp;amp; spinnerStateForm101) {  gotToHomeScreen();  }  }, [spinnerStateMonthly, spinnerStateWeekly, spinnerStateForm101,   spinnerStateForm106]);   };  

Комментарии:

1. я получаю сообщение об ошибке, т. е. недопустимый вызов.