React- native ///回调不是一个函数。 （在'callback（）'中，'回调'未定义）

Question

我在job_action.js中有错误当我使用onButtonPress函数时，我无法进入卡座屏幕。

  

出了点问题... [TypeError：回调不是一个函数。 （在'callback（）'中，'回调'未定义）]

MapScreen.js

import React,{Component} from 'react';
import {View,Text,ActivityIndicator} from 'react-native';
import {MapView} from 'expo';
import {connect} from  'react-redux';
import {Button} from 'react-native-elements';

import * as actions from  '../actions';
class MapScreen extends  Component {
    state = {
        mapLoaded: false,
        region: {
            longitude: -122,
            latitude: 37,
            longitudeDelta: 0.04,
            latitudeDelta: 0.09
        }
    }

    componentDidMount() {
        this.setState({mapLoaded: true});
    }

    onRegionChangeComplete = (region) => {
        this.setState({region});
    }
    onButtonPress = () => {
        this.props.fetchJobs(this.state.region,()=>{
            this.props.navigation.navigate('deck');
        });
    }

    render() {
        if (!this.state.mapLoaded) {
            return (
                <View style={{flex: 1, justifyContent: 'center'}}>
                    <ActivityIndicator size="large"/>
                </View>
            );
        }
        return (
            <View style={{flex: 1}}>
                <MapView
                    region={this.state.region}
                    style={{flex: 1}}
                    onRegionChangeComplete={this.onRegionChangeComplete}
                />
                <View style={styles.buttonContainer}>
                    <Button
                        large
                        title="Search This Area"
                        backgroundColor="#009688"
                        icon={{name: 'search'}}
                        onPress={this.onButtonPress}
                    />
                </View>
            </View>
        );
    }

}
const styles={
    buttonContainer:{
        position:'absolute',
        bottom:20,
        left:0,
        right:0
    }
}
export default connect(null,actions)(MapScreen);

job_action.js

import axios from 'axios';
import qs from 'qs';
import {
    FETCH_JOBS
} from './types';

const JOB_ROOT_URL = 'https://jobs.github.com/positions.json?';
const GITHUB_BASE_URL = 'https://jobs.github.com/positions.json?';
const JOB_QUERY_PARAMS = {
    publisher: '4201738803816157',
    format: 'json',
    v: '2',
    latlong: 1,
    radius: 10,
    q: 'javascript'
}
const buildJobsUrl = (zip) => {
    const query = qs.stringify({...JOB_QUERY_PARAMS, l: zip});
    return `${JOB_ROOT_URL}${query}`;
};
export const fetchJobs = ({ longitudeDelta, latitudeDelta, longitude, latitude,callback}) => {

    return async (dispatch) => {
        try {
            const url = `${GITHUB_BASE_URL}lat=${latitude}&long=${longitude}`;

            let {data} = await axios.get(url);
            console.log(data);
            dispatch({
                type: FETCH_JOBS,
                payload: data
            });
            callback();

        } catch (err) {
            console.log("Something went wrong... ", err);
        }
    }
};

Answer 1

写（更新）：

onButtonPress = () => {
        this.props.fetchJobs(this.state.region,
            this.props.navigation.navigate('deck'));
    }

Answer 2

在JavaScript中，默认情况下未绑定类方法。如果忘记绑定onButtonPress函数并将其传递给onClick，则在实际调用该函数时将无法定义。

在构造函数中，绑定onButtonPress函数，在构造函数中添加以下行：

this.onButtonPress = this.onButtonPress.bind(this);