React Native NavigationEvents: onDidFocus получает бесконечный цикл

Question

Я использую NavigationEvents для автоматической загрузки моего списка.

Пока он работает и загружает мой обновленный список, но в консоли он продолжает выполнять функцию вызова API на INFINITE L OOP.

Однако, когда я открываю экран списка, я просто хочу загрузить функцию вызова API ОДИН РАЗ.

Так что, если есть какое-либо лучшее решение, пожалуйста, не стесняйтесь помочь.

Фрагмент кода ниже:

import { NavigationEvents } from 'react-navigation';

import NameActionBar from '../components/mNameActionBar';
import FreelancerList from '../components/mFreelancerList';

export default class MasterScreen extends Component {

    componentDidMount() {
        this.getFreelancerList();
        console.log('ComponentDidMount()');
    }

    getFreelancerList() {
        console.log('Freelancer List');
        let self = this;
        AsyncStorage.getItem('my_token').then((keyValue) => {
            console.log('Master Screen (keyValue): ', keyValue); //Display key value
            axios({
                method: 'get',
                url: Constants.API_URL + 'user_m/freelancer_list/',
                responseType: 'json',
                headers: {
                    'X-API-KEY': Constants.API_KEY,
                    'Authorization': keyValue,
                },
            })
                .then(function (response) {
                    //console.log('Response Data: ', response.data.data);
                    console.log('Response: ', response);
                    self.setState({
                        dataSource: response.data.data,
                    });
                })
                .catch(function (error) {
                    console.log('Error: ', error);
                });
        }, (error) => {
            console.log('error error!', error) //Display error
        });
    }

    viewFreelancerList() {
        const { dataSource } = this.state;
        return (
            <View>
                <FlatList
                    data={dataSource}
                    keyExtractor={({ id }, index) => index.toString()}
                    renderItem={({ item }) => <FreelancerList {...item} />}
                />
            </View>
        );
    }

    render() {
        return (
            <>
                {<NavigationEvents onDidFocus={this.getFreelancerList()} />}
                <NameActionBar />
                <ScrollView>
                    {this.viewFreelancerList()}
                </ScrollView>
            </>
        );
    }
}

Answer 1

Вам нужно убрать скобки, когда вы передаете метод onDidFocus. Сделайте так, чтобы это выглядело так: onDidFocus={this.getFreelancerList}

Это обычная ошибка с реакции. Когда вы включаете скобки после имени функции, вы фактически выполняете функцию. Исходя из вашего кода, похоже, что это не ваше намерение. Вы пытаетесь передать обратный вызов в onDidFocus, чтобы метод вызывался только тогда, когда компонент получал фокус. Обновление состояния в getFreelancerList. Итак, ваш компонент рендерится, и вы сразу же звоните getFreelancerList. В getFreelancerList вы обновляете состояние, вызывая рендеринг компонента еще раз. Затем, как вы уже догадались, когда компонент перезапускается, он снова вызывает getFreelancerList, и цикл повторяется:)

Answer 2

Есть два способа определить функцию обратного вызова, которая будет вызываться для некоторого события. Либо вам нужно связать функцию в конструкторе, либо сделать эту функцию как функция стрелки . Лучше всего никогда не использовать функцию стрелки в свойстве класса; это вредит тестируемости и ограничивает возможности двигателя. Использование bind присоединит методы к прототипу класса.

this. getFreelancerList = это. getFreelancerList.bind (this)