Использование componentWillUpdate с операторами switch - PullRequest
Новая
       11

Использование componentWillUpdate с операторами switch

0 голосов
/ 18 сентября 2018

Я использую React-Native и React-Native-Firebase и пытаюсь, чтобы мой компонент Events сделал другой запрос Firebase (а затем обновил хранилище приставок) в зависимости от значения свойства ActivityType.

Вот родительский компонент, который работает просто отлично.Он обновляет state.eventType, когда я изменяю раскрывающееся значение, и передает значение в <Events />. 

let eventTypes = [{value: 'My Activity'}, {value: 'Friend Activity'}, {value: 'All Activity'}];

  state = {
    showEventFormModal: false,
    eventType: 'Friend Activity'
  }
          <View style={styles.container}>
          <Dropdown
            data={eventTypes}
            value={this.state.eventType}
            containerStyle={{minWidth: 200, marginBottom: 20}}
            onChangeText={val => this.setState({eventType: val})}
          />
          <Events activityType={this.state.eventType}/>
        </View>

А вот компонент События.Использование оператора Switch, чтобы определить, какой ActivityType был передан в реквизит.У меня возникла проблема с бесконечным циклом, потому что в каждом операторе case я отправляю действие по обновлению хранилища, которое вызывает повторное отображение и componentWillUpdate () для повторного запуска.Я пытаюсь понять, каков оптимальный способ решения этой проблемы?Потому что теперь мой метод не работает должным образом.Существует ли общая схема реагирования для достижения этой цели?

// GOAL: when this components props are updated
// update redux store via this.props.dispatch(updateEvents(events))
// depending on which type of activity was selected

componentWillUpdate() { 
    let events = [];

    switch(this.props.activityType) {
        case 'Friend Activity': // get events collections where the participants contains a friend

            // first get current users' friend list
            firebase.firestore().doc(`users/${this.props.currentUser.uid}`)
            .get()
            .then(doc => {
                return doc.data().friends
            })
            // then search the participants sub collection of the event
            .then(friends => {
                firebase.firestore().collection('events')
                .get()
                .then(eventsSnapshot => {
                    eventsSnapshot.forEach(doc => {
                        const { type, date, event_author, comment } = doc.data();
                        let event = {
                            doc, 
                            id: doc.id,
                            type,
                            event_author,
                            participants: [],
                            date,
                            comment,
                        }
                        firebase.firestore().collection('events').doc(doc.id).collection('participants')
                        .get()
                        .then(participantsSnapshot => {
                            for(let i=0; i<participantsSnapshot.size;i++) {
                                if(participantsSnapshot.docs[i].exists) {
                                    // if participant uid is in friends array, add event to events array
                                    if(friends.includes(participantsSnapshot.docs[i].data().uid)) {
                                        // add participant to event
                                        let { displayName, uid } = participantsSnapshot.docs[i].data();
                                        let participant = { displayName, uid }
                                        event['participants'].push(participant)
                                        events.push(event)
                                        break;
                                    }
                                }
                            }
                        })
                        .then(() => {
                            console.log(events)
                            this.props.dispatch(updateEvents(events))
                        })
                        .catch(e => {console.error(e)})
                    })
                })
                .catch(e => {console.error(e)})
            })
        case 'My Activity': // get events collections where event_author is the user
            let counter = 0;
            firebase.firestore().collection('events').where("event_author", "==", this.props.currentUser.displayName) 
            .get()
            .then(eventsSnapshot => {
                eventsSnapshot.forEach(doc => {
                    const { type, date, event_author, comment } = doc.data();
                    let event = {
                        doc, 
                        id: doc.id,
                        type,
                        event_author,
                        participants: [],
                        date,
                        comment,
                    } 
                    // add participants sub collection to event object
                    firebase.firestore().collection('events').doc(event.id).collection('participants')
                    .get()
                    .then(participantsSnapshot => {
                        participantsSnapshot.forEach(doc => {
                            if(doc.exists) {
                                // add participant to event
                                let { displayName, uid } = doc.data();
                                let participant = { displayName, uid }
                                event['participants'].push(participant)
                            }
                        })
                        events.push(event);
                        counter++;
                        return counter;
                    })
                    .then((counter) => {
                        // if all events have been retrieved, call updateEvents(events)
                        if(counter === eventsSnapshot.size) {
                            this.props.dispatch(updateEvents(events))
                        }
                    })
                })
            })
        case 'All Activity':
            // TODO
            // get events collections where event_author is the user 
            // OR a friend is a participant
    }
}

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

Я понял, что такое чистый способ справиться с этим, когда узнал, что могу получить доступ к prevProps через componentDidUpdate.Таким образом, я могу сравнить предыдущий ActivityType с текущим, и если они изменились, то на componentDidUpdate он должен вызвать fetchData(activityType). 

class Events extends React.Component {

 componentDidMount() {
     // for initial load 
     this.fetchData('My Activity')
 }

 componentDidUpdate(prevProps) {     
     if(this.props.activityType !== prevProps.activityType) {
         console.log(`prev and current activityType are NOT equal. Fetching data for ${this.props.activityType}`)
         this.fetchData(this.props.activityType)
     }
 } 
 fetchData = (activityType) => {
    //switch statements deciding which query to perform
      ...
      //this.props.dispatch(updateEvents(events))
 }

}

https://reactjs.org/docs/react-component.html#componentdidupdate

0 голосов
/ 19 сентября 2018

Обновление магазина лучше всего делать по пользовательским действиям.Поэтому я бы обновил хранилище в событии Dropdown onChange по сравнению с функцией componentWillUpdate.

...