时间戳

首页 > 解决方案 > TypeError _this2.getWifiList().bind 不是函数。反应原生组件DidMount

javascript - TypeError _this2.getWifiList().bind 不是函数。反应原生组件DidMount

问题描述

我正在尝试让我的应用程序刷新选项的选择组件列表。该列表将显示选择的 wifi 热点，我希望应用程序每 5 秒扫描一次，所以我遵循了本指南：https ://blog.stvmlbrn.com/2019/02/20/automatically-refreshing-data- in-react.html

但是当我运行应用程序时，我收到了这个错误：

错误

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]

此错误在一秒钟内出现 10 次。我尝试删除绑定，但我得到了同样的错误。

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;

标签： javascriptreactjsreact-native

解决方案

问题在于你打电话的方式.bind()：

this.getWifiList().bind(this)

请注意，.bind()是 Function 原型的一个方法，因此，只有在函数引用上调用时才可用。

在这种情况下，您调用.bind()的this.getWifiList()是 的返回值getWifiList，而不是函数本身。

要修复您遇到的错误，您只需要在函数上调用它：

this.getWifiList.bind(this)

推荐阅读