Question

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

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

但是，每当我打开列表屏幕时，我只想加载API调用函数ONCE。

因此，如果有更好的解决方案，请随时提供帮助。

下面的代码段：

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会将方法附加到类原型。

这个。 getFreelancerList =此。 getFreelancerList.bind（this）

反应本机NavigationEvents：onDidFocus获得无限循环

2 个答案: