SetState после полной загрузки данных

У меня есть компонент, который переходит к другому компоненту, но требуется 2 секунды, прежде чем второй компонент отобразится из-за данных, у меня есть массив из 200 элементов с именем this.schools, у меня есть загрузчик активности, который отображается в зависимости от состояния, я хочу измените состояние сразу после того, как данные будут полностью сопоставлены, поэтому, пожалуйста, есть ли какие-нибудь идеи о том, как я могу это сделать, я попытался установить состояние переменной в false после того, как я определил переменную, содержащую массив, но это не работает.

КОМПОНЕНТ НАВИГАТОРА

this.props.navigation.navigate('Find', {
        });

НАЙТИ КОМПОНЕНТ

export default class Find extends Component {
constructor(props) {
    super(props);
    this.schools = ["Abubakar Tafawa Balewa University, Bauchi", "Ahmadu Bello University, Zaria", "Bayero University, Kano", "Federal University Gashua, Yobe", "Federal University of Petroleum Resources, Effurun", "Federal University of Technology, Akure", "Federal University of Technology, Minna", "Federal University of Technology, Owerri", "Federal University, Dutse, Jigawa State", "Federal University, Dutsin-Ma, Katsina", "Federal University, Kashere, Gombe State", "Federal University, Lafia, Nasarawa State", "Federal University, Lokoja, Kogi State", "Alex Ekweme University, Ndufu-Alike, Ebonyi State", "Federal University, Otuoke, Bayelsa", "Federal University, Oye-Ekiti, Ekiti State", "Federal University, Wukari, Taraba State", "Federal University, Birnin Kebbi", "Federal University, Gusau Zamfara", "Michael Okpara University of Agriculture, Umudike", "Modibbo Adama University of Technology, Yola", "National Open University of Nigeria, Lagos", "Nigeria Police Academy Wudil", "Nigerian Defence Academy Kaduna", "Nnamdi Azikiwe University, Awka", "Obafemi Awolowo University,Ile-Ife", "University of Abuja, Gwagwalada", "Federal University of Agriculture, Abeokuta", "University of Agriculture, Makurdi", "University of Benin", "University of Calabar", "University of Ibadan", "University of Ilorin", "University of Jos", "University of Lagos", "University of Maiduguri", "University of Nigeria, Nsukka", "University of Port-Harcourt", "University of Uyo", "Usumanu Danfodiyo University", "Nigerian Maritime University Okerenkoko, Delta State", "Abia State University, Uturu", "Adamawa State University Mubi", "Adekunle Ajasin University, Akungba", "Akwa Ibom State University, Ikot Akpaden", "Ambrose Alli University, Ekpoma", "Chukwuemeka Odumegwu Ojukwu University, Uli", "Bauchi State University, Gadau", "Benue State University, Makurdi", "Yobe State University, Damaturu", "Cross River State University of  Technology, Calabar", "Delta State University Abraka", "Ebonyi State University, Abakaliki", "Ekiti State University", "Enugu State University of Science and Technology, Enugu", "Gombe State Univeristy, Gombe", "Ibrahim Badamasi Babangida University, Lapai", "Ignatius Ajuru University of Education,Rumuolumeni", "Imo State University, Owerri", "Sule Lamido University, Kafin Hausa, Jigawa", "Kaduna State University, Kaduna", "Kano University of Science & Technology, Wudil", "Kebbi State University of Science and Technology, Aliero", "Kogi State University Anyigba", "Kwara State University, Ilorin", "Ladoke Akintola University of Technology, Ogbomoso", "Ondo State University of Science and Technology Okitipupa", "River State University of Science and Technology", "Olabisi Onabanjo University, Ago Iwoye", "Lagos State University, Ojo", "Niger Delta University Yenagoa", "Nasarawa State University Keffi", "Plateau State University Bokkos", "Tai Solarin University of Education Ijebu Ode", "Umar Musa Yar' Adua University Katsina", "Osun State University Osogbo", "Taraba State University, Jalingo", "Sokoto State University", "Yusuf Maitama Sule University Kano", "Oyo State Technical University Ibadan", "Ondo State University of Medical Sciences", "Edo University Iyamo", "Eastern Palm University Ogboko, Imo State", "University of Africa Toru Orua, Bayelsa State", "Bornu State University, Maiduguri", "Moshood Abiola University of Science and Technology Abeokuta", "Gombe State University of Science and Technology", "Zamfara State University", , "Achievers University, Owo", "Adeleke University, Ede", "Afe Babalola University, Ado-Ekiti - Ekiti State", "African University of Science & Technology, Abuja", "Ajayi Crowther University, Ibadan", "Al-Hikmah University, Ilorin", "Al-Qalam University, Katsina", "American University of Nigeria, Yola", "Augustine University", "Babcock University,Ilishan-Remo", "Baze University", "Bells University of Technology, Otta", "Benson Idahosa University, Benin City", "Bingham University, New Karu", "Bowen University, Iwo", "Caleb University, Lagos", "Caritas University, Enugu", "Chrisland University", "Covenant University Ota", "Crawford University Igbesa", "Crescent University", "Edwin Clark University, Kaigbodo", "Elizade University, Ilara-Mokin", "Evangel University, Akaeze", "Fountain Unveristy, Oshogbo", "Godfrey Okoye University, Ugwuomu-Nike - Enugu State", "Gregory University, Uturu", "Hallmark University, Ijebi Itele, Ogun", "Hezekiah University, Umudi", "Igbinedion University Okada", "Joseph Ayo Babalola University, Ikeji-Arakeji", "Kings University, Ode Omu", "Kwararafa University, Wukari", "Landmark University, Omu-Aran.", "Lead City University, Ibadan", "Madonna University, Okija", "Mcpherson University, Seriki Sotayo, Ajebo", "Micheal & Cecilia Ibru University", "Mountain Top University", "Nile University of Nigeria, Abuja", "Novena University, Ogume", "Obong University, Obong Ntak", "Oduduwa University, Ipetumodu - Osun State", "Pan-Atlantic University, Lagos", "Paul University, Awka - Anambra State", "Redeemer's University, Mowe", "Renaissance University, Enugu", "Rhema University, Obeama-Asa - Rivers State", "Ritman University, Ikot Ekpene, Akwa Ibom", "Salem University, Lokoja", "Samuel Adegboyega University, Ogwa.", "Southwestern University, Oku Owa", "Summit University", "Tansian University, Umunya", "University of Mkar, Mkar", "Veritas University, Abuja", "Wellspring University, Evbuobanosa - Edo State", "Wesley University. of Science & Technology, Ondo", "Western Delta University, Oghara Delta State", "Christopher University Mowe", "Kola Daisi University Ibadan, Oyo State", "Anchor University Ayobo Lagos State", "Dominican University Ibadan Oyo State", "Legacy University, Okija Anambra State", "Arthur Javis University Akpoyubo Cross river State", "Crown Hill University Eiyenkorin, Kwara State", "Coal City University Enugu State", "Clifford University Owerrinta Abia State", "Admiralty University, Ibusa Delta State", "Spiritan University, Nneochi Abia State", "Precious Cornerstone University, Oyo", "PAMO University of Medical Sciences, Portharcourt", "Atiba University Oyo", "Eko University of Medical and Health Sciences Ijanikin, Lagos", "Skyline University, Kano"];

    this.schools = this.schools.sort();
    this.state = {
        schools: this.schools,
        index: -1,
        text: '',
        loaded: false
    };

    this.handleChangeEvent = this.handleChangeEvent.bind(this);
    this.schoolChange = this.schoolChange.bind(this);
}
// this is where i set the state
componentDidMount()
{
this.setState({loaded: true})
}
static navigationOptions = {
    header: null,
    drawerLockMode: 'locked-closed'
};
 update(index){
   console.info(index);
 }
 handlePressedIn(){
     this.props.navigation.navigate('Land', {});
 }
handleIn(index){
    this.setState({index}, () => {this.update(this.state.index)})
}
 schoolChange(text){
     const schools = this.schools.filter(school => school.toUpperCase().includes(text.toUpperCase()));
     this.setState({
         schools,
     });
 }
 handleChangeEvent(text){
     this.setState({text}, () => {
         this.schoolChange(this.state.text)
     });
 }
render() {
    const schools = this.state.schools.map((school, index) =>
        <TouchableNativeFeedback
            onPressIn = {() => this.handleIn(index)}
            onPress = {() => this.handlePressedIn(index)}
            key = {index}>
            <View style = { this.state.index == index ? styles.hover : styles.minis}>
                <Text style = {this.state.index == index ?styles.textHover: styles.text}>{school}</Text>
            </View></TouchableNativeFeedback>
    );
    const view = <TouchableNativeFeedback><ScrollView overScrollMode = {'never'} keyboardShouldPersistTaps='always'>{schools}</ScrollView></TouchableNativeFeedback>;
    const shadowOpt = {
        color: "#000",
        border: 12,
        opacity: '0.08',
        radius: 12,
        x: 0,
        y: 1,
    };
    return (
        <View style = {styles.container}>
            <StatusBar backgroundColor='#F2C490' translucent = {true} barStyle='dark-content'/>
            <View style = {styles.header}>
                <HideWithKeyboard style = {{
                    flex: 1,
                    alignContent: 'center',
                    justifyContent: 'space-between',
                    marginLeft: 15,
                    marginRight: 15,
                    flexDirection: 'row'
                }}><Text style = {styles.headerLeft}>sẹlẹ</Text>
                    <Text style = {styles.headerRight}>Select Institute</Text></HideWithKeyboard>
            </View><View style = {styles.search}>
                <View style = {styles.subSearch}><MaterialIcons style = {{
                    padding: 10,
                }} name = "search" size = {30} color = "#535461"/>
                    <TextInput placeholder = "Search for your Institute"
                               value = {this.state.text}
                               onChangeText = {(text) => this.handleChangeEvent(text)}
                               placeholderStyle = {{fontSize: 16, fontFamily: 'mont'}}
                               placeholderTextColor = "#615D5D"
                               underlineColorAndroid = {'transparent'}
                               style = {{
                                   flex: 1,
                                   paddingTop: 10,
                                   paddingRight: 10,
                                   paddingBottom: 10,
                                   width: '65%',
                                   paddingLeft: 0,
                                   padding: 4,
                                   backgroundColor: '#fff',
                                   fontSize: 16, fontFamily: 'mont', color: '#615D5D',
                               }}/></View>
            </View>
/*
THE ACTIVITY INDICATOR SHOWING BASED ON THE LOADED STATE RENDERING THE MAPPED ARRAY
*/
                <View style = {{flex: 1}}>
                {this.state.loaded ? <View style = {{flex: 1}}>{view}</View>
                    :<ActivityIndicator animating = {true} size='large' color = "#E5AC6C"/>
                    }
            </View>
        </View>
    );
}

}

Где вы устанавливаете для loaded значение true?

Jonas Wilms 20.08.2018 16:09

@jonaswilms Я изменил его на false, это была ошибка, я отредактировал код

Adokiye Iruene 20.08.2018 16:13
I have tried setting the state of variable to false after I have defined the variable containing the array but it doesn't work. <Я не могу найти это в вашем коде.
Jonas Wilms 20.08.2018 16:16

Проверьте функцию componentDidMount

Adokiye Iruene 20.08.2018 16:20

Итак, ваша проблема в том, что компонент загружается очень долго?

Jonas Wilms 20.08.2018 16:22

да именно @JonasWilms

Adokiye Iruene 20.08.2018 16:22

Почему вы хотите показать все 200 школ? Почему бы просто не показать 10 ближайших совпадений?

Jonas Wilms 20.08.2018 16:26

Это не страница поиска @JonasWilms, это страница для отображения всех школ, ввод текста предназначен только для фильтрации по школам.

Adokiye Iruene 20.08.2018 16:27

У меня была такая же проблема, и я начал использовать разбиение на страницы, что избавило меня от огромной головной боли. Если вы используете FlatList, вы можете использовать метод, который он предоставляет, для получения дополнительных данных по мере приближения к концу списка.

Tall Paul 21.08.2018 15:47
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
9
77
0

Другие вопросы по теме