Question

我需要有关如何使用输入表单中的文本作为反应原生的axios请求输入的建议和帮助。

现在我正在为我的应用添加SignIn屏幕。要检索我的应用的任何API，需要令牌。在此之前，我刚刚使用redux创建了一个动作文件来获取令牌并将其存储在reducer中。

对于这种情况，我尝试在登录时使用表单输入中的email和password作为我检索令牌的数据。长话短说，这是我现在的代码SignInScreen.js

import React, { Component, AsyncStorage } from 'react';
import { View, Text } from 'react-native';
import { FormLabel, FormInput, Button, Card } from 'react-native-elements';
import axios from 'axios';
import { FETCH_TOKEN } from '../actions/types';
import apiConfig from '../services/api/url_config';

class SignInScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loggedIn: null,
            email: '',
            password: '',
            error: '',
            loading: false
        };
    }

onButtonPress = () => async (dispatch) => {
    let email = this.state.email;
    let password = this.state.password;

    AsyncStorage.getItem('auth', (res) => {
        let TOKEN_URL = apiConfig.url + 'tokens';
        let auth = {};

        if (res === null) {
            auth = {};
        } else {
            auth.push({
                email: email,
                password: password,
                role: 'user'
            });

            console.log(auth);

            axios.post(TOKEN_URL, auth)
            .then((response) => {
                console.log(response.data.token);
                dispatch({ type: FETCH_TOKEN, payload: response.data.token });
                this.props.navigation.navigate('Home');
            })
            .catch((e) => {
                console.log(e);
                this.props.navigation.navigate('SignIn');
            });
        }
    });    
}


render() {
    return (
        <View>
            <Card>
                <FormLabel>Email</FormLabel>
                <FormInput 
                    placeholder="user@email.com"
                    value={this.state.email}
                    onChangeText={email => this.setState({ email })}
                />
            </Card>
            <Card>
                <FormLabel>Password</FormLabel>
                <FormInput 
                    secureTextEntry
                    placeholder="password"
                    value={this.state.password}
                    onChangeText={password => this.setState({ password })}
                />
            </Card>

            <Card>
                <Button 
                    title="Log In"
                    onPress={this.onButtonPress}
                />
            </Card>

        </View>
    );
}

我的actions/types

export const FETCH_TOKEN = 'fetch_token';

我的tokenReducer.js

import {
    FETCH_TOKEN
} from '../actions/types';

export default function tokenReducer(state = '', action) {
    switch (action.type) {
        case FETCH_TOKEN:
            return action.payload;
        default:
            return state;
    }
}

我运行此代码，当我点击LogIn按钮时，根本没有结果。即使是控制台日志也没有出现。如果没有我可以参考的控制台日志，我不知道如何解决这个问题。

如您所见，要获取令牌email和password以及“角色”的硬编码值，需要与axios.post请求一起传递。我希望如果请求成功，它会将用户导航到Home屏幕，如果不是，则会将用户再次导航到SignIn屏幕。

我的问题是，如果我想使用表单输入中的数据或文本与axios请求一起传递，我是否正确使用此代码？如果没有，请分享您的建议，帮助我。

谢谢。

Answer 1

使用fetch替换你的axios请求：

fetch(TOKEN_URL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(auth),
  })
  .then(response => response.json())
  .then(responseData => /* responseData.token to access your token */ )
  .catch(err => /* Handle Error */ )
});

也许将你的组件与redux连接起来使用this.props.dispatch来调度动作而不是asyn func：

从redux导入连接函数：

import { connect } from 'react-redux'

在文件末尾添加：

export default connect()(SignInScreen)

删除异步功能：

onButtonPress = () => {

使用this.props.dispatch来分派行动：

this.props.dispatch({ type: FETCH_TOKEN, payload: response.data.token });

您还可以使用mapStateToProps

从组件道具中的redux store获取状态

function mapStateToProps(state) {
  return { isLoggedIn: state.isLoggedIn } // accessed by this.props.isLoggedIn in your component
}

export default connect(mapStateToProps)(SignInScreen)

如何使用表单输入数据作为反应原生的axios请求的输入？

1 个答案: