TypeError _this2.getWifiList().bind 不是 function。 反应原生组件DidMount

Question

I'm trying to get my app to refresh a select components list of options. The list will show a selection of wifi hotspots and I want the app to scan for them every 5 seconds, so I followed this guide: https://blog.stvmlbrn.com/2019/02/20/automatically-refreshing-data-in-react.html

But when I run the app, I get this error:

Error

Possible Unhandled Promise Rejection (id: 0):
TypeError: _this2.getWifiList().bind is not a function. (In '_this2.getWifiList().bind((0, _assertThisInitialized2.default)(_this2))', '_this2.getWifiList().bind' is undefined)
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:187369:75
tryCallOne@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:27870:16
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:27971:27
_callTimer@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:31410:17
_callImmediatesPass@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:31449:17
callImmediates@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:31666:33
__callImmediates@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:3610:35
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:3396:34
__guard@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:3593:15
flushedQueue@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:3395:21
flushedQueue@[native code]
invokeCallbackAndReturnFlushedQueue@[native code]

This error comes up 10 times in a second. I tried removing the bind but I get the same error.

MainScreen.js

import React, {useState}  from 'react';
import { StyleSheet, PermissionsAndroid, Linking, View, TouchableOpacity  } from 'react-native';
import { IndexPath, Layout, Text, Button, Select, SelectItem } from '@ui-kitten/components';
import { Icon } from 'react-native-eva-icons';

import {styles} from '../styles'
import WifiManager from "react-native-wifi-reborn";

class LocationSelector extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedIndex : (new IndexPath(0)),
            wifiList: null,
            intervalID: null,
        }
    }

    componentDidMount() {
        this.getWifiList();

    }

    componentWillUnmount() {
        clearInterval(this.intervalID);
    }


    getWifiList = async () => {

        WifiManager.setEnabled(true);
        await WifiManager.reScanAndLoadWifiList()
            .then((data) => {
                this.state.wifiList = data
                this.intervalID = setTimeout( async () => {await this.getWifiList().bind(this)}, 5000);
            });
    }

    renderOption = (title) => (
        <SelectItem title={title}/>
    )

    render() {
        console.log(this.state.selectedIndex);

        const data = [
            'Venue1',
            'Venue2',
            'Venue3',
        ];

        const displayValue = data[this.state.selectedIndex.row];

        return(
            <Select
                style={styles.select}
                size="large"
                placeholder='Default'
                value={displayValue}
                disabled={this.props.disabled}
                accessoryLeft={PinIcon}
                selectedIndex={this.state.selectedIndex}
                onSelect={(index) => {(this.state.selectedIndex = index); this.forceUpdate()}}>
                {data.map(this.renderOption)}
            </Select>
        );
    }
}

class MainScreen extends React.Component {
    constructor(props) {
        super(props);
        this.navigation = props.navigation
        this.state = {
            isCheckedIn: false,
        }
    }

    render() {
        return (

            <Layout style={styles.container}>

                <LocationSelector />

            </Layout>
        );
    }
}

export default MainScreen;

Answer 1

The issue is in the way you are calling .bind() :

this.getWifiList().bind(this)

Note that .bind() is a method of the Function prototype, therefore, is available only when called on a function reference.

In this case, you are calling .bind() on this.getWifiList() , which is the return value of getWifiList , not the functon itself.

To fix the error you are getting, you just need to call it on the function:

this.getWifiList.bind(this)