Reactjs undefined不是一个函数（计算和获取（'；apiurl'；）'；）

我正在使用以下版本

react本机路由器流量^3.39.1

反应本机0.44.0

我希望它会调用我正在使用的API“fetch” 已使用componentDidMount，但它显示了另一个错误

undefined不是对象（正在计算'this.\u component.getScrollableNode'）

但我得到的是错误输出

复制步骤

使用路由器流量创建三个场景（在我的例子中是应用程序、登录、主页）

使用ScrollView创建Login.js创建按钮

在调用函数后使用TouchableHighlight 像使用onPress

onPress={（）=>this.fetchData（）}

下面是我在App.js中使用的代码

import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    AsyncStorage,
} from 'react-native';

import Login from './components/Login'
import Register from './components/Register'
import Home from './components/Home'
import { Scene, Router, TabBar, Modal, Schema, Actions, Reducer, ActionConst } from 'react-native-router-flux'

const reducerCreate = params=>{
    const defaultReducer = Reducer(params);
    return (state, action)=>{
        console.log("ACTION:", action);
        return defaultReducer(state, action);
    }
};

export default class App extends Component {

    constructor(props, context) {
        super(props, context);
        this.state = {
            logged: false,
            loading: true,
        };
    };

    componentWillMount(){
        self = this;
        AsyncStorage.getItem('token')
        .then( (value) =>{
            if (value != null){
                this.setState({
                    logged: true,
                    loading: false,
                });
            }
            else {
                this.setState({
                    loading: false,
                })
            }
        });
    };

    render() {
        if (this.state.loading) {
            return <View><Text>Loading</Text></View>;
        }
        return (
            <Router>
                <Scene hideNavBar={true} key="root">
                    <Scene key="logIn" component={Login} title="Login" initial={!this.state.logged}/>
                    <Scene key="regisTer" component={Register} title="Register"/>
                    <Scene key="home" component={Home} title="home"  initial={this.state.logged}/>
                </Scene>
            </Router>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

import React，{Component}来自'React'；
进口{
看法
文本，
样式表，
异步存储，
}从“反应本机”；
从“./components/Login”导入登录名
从“./components/Register”导入寄存器
从“./components/Home”导入主页
从“react native Router flux”导入{场景、路由器、选项卡栏、模式、模式、操作、还原器、ActionConst}
常量reducerCreate=params=>{
const defaultReducer=减速机（参数）；
返回（状态、操作）=>{
日志（“操作：”，操作）；
返回defaultReducer（状态、动作）；
}
};
导出默认类应用程序扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
记录：false，
加载：对，
};
};
组件willmount（）{
self=这个；
AsyncStorage.getItem（'token'）
。然后（（值）=>{
if（值！=null）{
这是我的国家({
是的，
加载：false，
});
}
否则{
这是我的国家({
加载：false，
})
}
});
};
render（）{
if（this.state.loading）{
回装；
}
返回(
)
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
},
});

和下面的代码，用于Login.js

/* @flow */

import React, { Component } from 'react';

import {
    View,
    StyleSheet,
    Image,
    ScrollView,
    TextInput,
    Text,
    TouchableHighlight,
    Alert,
} from 'react-native';
import { Container, Content, InputGroup, Input, Icon, Item } from 'native-base';
import Button from 'react-native-button'
import {Actions} from 'react-native-router-flux'
import ResponsiveImage from 'react-native-responsive-image'

export default class Login extends Component {

    constructor(props){
        super(props)
        this.state = {
            email: '',
            password: '',
            data: '',
        }
    }

    fetchData() {
        fetch('http://allstariq.tbltechnerds.com/api/login/?username=andress&password=23434')
        .then((response) => response.json())
        .then((responseData) => {
            this.setState({
                data: responseData.movies,
            });
        })
        .done();
    }

    render() {
        return (
            <View style={styles.container}>

            <ScrollView>

                <View style={ styles.logoContainer }>

                    <View style={{flexDirection: 'row',}}>
                        <ResponsiveImage
                        source={require('../assets/logo.png')}
                        initWidth="300"
                        initHeight="160" />
                    </View>

                </View>

                <View style={ styles.formContainer }>
                    <Item>
                        <Icon active name='mail' />
                        <Input
                            onChangeText={(text) => this.setState({email: text})}
                            value={this.state.email}
                            placeholder='Email'/>
                    </Item>

                    <Item>
                        <Icon active name='key' />
                        <Input
                            onChangeText={(text) => this.setState({password: text})}
                            value={this.state.password}
                            placeholder='Password'/>
                    </Item>
                    <TouchableHighlight
                        style={ styles.loginButton }
                        onPress={ () => this.fetchData() }>
                        <Text style={ styles.btnText}>Login</Text>
                    </TouchableHighlight>
                </View>

                <View style={ styles.bottomContainer }>
                    <Text style={ styles.cenText }>Dont worry if you haven't an account yet . . </Text>
                    <Text
                    style={ styles.blueText}
                    onPress={ Actions.regisTer }
                    >Register Now</Text>
                </View>

            </ScrollView>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    logoContainer: {
        flex: .5,
        padding: 10,
        justifyContent: 'center',
        alignItems: 'center',
    },
    logoItem: {
        width: null,
        height: null,
        resizeMode: 'cover',
    },
    formContainer: {
        flex: 4,
        padding: 10,
    },
    inputelm: {
        marginBottom: 10,
        backgroundColor: '#999',
        borderWidth: 0,
        fontSize: 20,
        color: '#FFF',
        fontFamily: 'AmaticSC-Bold',
    },
    loginButton: {
        borderRadius: 3,
        marginBottom: 20,
        marginTop: 20,
        paddingLeft: 10,
        paddingRight: 10,
        backgroundColor: '#2196f3',
        elevation: 4,
    },
    signupButton: {
        borderRadius: 3,
        marginBottom: 20,
        marginTop: 20,
        paddingLeft: 10,
        paddingRight: 10,
        backgroundColor: '#7cb342',
        elevation: 4,
    },
    btnText: {
        textAlign: 'center',
        color: '#FFF',
        fontSize: 30,
        lineHeight: 40,
    },
    blueText: {
        textAlign: 'center',
        color: '#2196f3',
        fontSize: 20,
        lineHeight: 40,
    },
    bottomContainer: {
        flex: 1,
        padding: 10,
    },
    cenText: {
        textAlign: 'center',
        fontSize: 16,
    },
});

/*@flow*/
从“React”导入React，{Component}；
进口{
看法
样式表，
形象,，
滚动视图，
文本输入，
文本，
触控高光，
警觉的，
}从“反应本机”；
从“本机基础”导入{容器、内容、输入组、输入、图标、项目}；
从“反应本机按钮”导入按钮
从“反应本机路由器流量”导入{Actions}
从“反应本机响应映像”导入响应映像
导出默认类登录扩展组件{
建造师（道具）{
超级（道具）
此.state={
电子邮件：“”，
密码：“”，
数据：“”，
}
}
fetchData（）{
取（'http://allstariq.tbltechnerds.com/api/login/?username=andress&password=23434')
.then（（response）=>response.json（））
.然后（（响应数据）=>{
这是我的国家({
资料：responseData.movies，
});
})
.完成（）；
}
render（）{
返回(
this.setState（{email:text}）
值={this.state.email}
占位符='Email'/>
this.setState（{password:text}）}
值={this.state.password}
占位符='Password'/>
this.fetchData（）}>
登录
如果你还没有账户，别担心。
现在注册
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
},
标识容器：{
弹性体：.5，
填充：10，
为内容辩护：“中心”，
对齐项目：“居中”，
},
标识项目：{
宽度：空，
高度：空，
resizeMode:“封面”，
},
formContainer：{
弹性：4，
填充：10，
},
输入：{
marginBottom:10，
背景颜色：“#999”，
边框宽度：0，
尺寸：20，
颜色：“#FFF”，
fontFamily:“AmaticSC Bold”，
},
登录按钮：{
边界半径：3，
marginBottom:20，
玛金托普：20，
paddingLeft:10，
paddingRight:10，
背景颜色：“#2196f3”，
标高：4，
},
注册按钮：{
边界半径：3，
marginBottom:20，
玛金托普：20，
paddingLeft:10，
paddingRight:10，
背景颜色：“#7cb342”，
标高：4，
},
btnText:{
textAlign:'中心'，
颜色：“#FFF”，
尺寸：30，
线高：40，
},
蓝文本：{
textAlign:'中心'，
颜色：“#2196f3”，
尺寸：20，
线高：40，
},
底部容器：{
弹性：1，
填充：10，
},
cenText:{
textAlign:'中心'，
尺寸：16，
},
});

---

使用react本机路由器流量获取的实际方法是什么？我是新手，请帮助我。

您是否尝试导入库

Import fetch from "fetch";

---

您尚未导入

fetch

函数，请从

节点fetch

模块导入它

import fetch from 'node-fetch'

---

好吧，虽然已经晚了几个月，但这里的问题是您的fetchData方法无法访问此b

fetchData() {

}

this.fetchData = function() {

}

fetchData = () => {

}