React Native NavigationEvents：onDidFocus获取无限循环

Question

我正在使用NavigationEvents自动加载我的列表。

到目前为止，它确实可以工作，并且可以加载我的更新列表，但是在控制台上，它继续在INFINITE LOOP上运行API调用函数。

但是，我只想在每次打开列表屏幕而不是无限循环时都加载一次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，并且循环重复：）