React Native NavigationEvents：onDidFocus 获得无限循环

Question

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

到目前为止，它确实有效，并且加载了我更新的列表，但在控制台上，它继续在无限循环上运行 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}

这是 React 的一个常见问题。当您在函数名称后面包含括号时，您实际上正在执行该函数。根据您的代码，看起来这实际上并不是您的意图。您试图将回调传递给 onDidFocus，以便当且仅当组件接收焦点时，才会调用该方法。

您遇到无限循环的原因是您正在更新 getFreelancerList 中的状态。所以你的组件渲染了，你立即调用getFreelancerList. 在 中getFreelancerList，您正在更新状态，导致组件再次呈现。然后，您猜对了，当组件重新渲染时，它会getFreelancerList再次调用，然后重复循环:)