#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. я получаю сообщение об ошибке, т. е. недопустимый вызов.