Question

我将所有功能保存在一个文件中，并在<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> </ul>项目中需要的活动中调用这些功能。现在我的一个函数有一个react native，我从我的在线服务器获取数据并在成功查询后打印响应。

现在，我希望能够使用fetch api中state的响应更新fetch method值。

then

api文件

 App.js

 ...


import {registerUsers} from './src/utils/api.js'


export class App extends Component{

state = {
    isLoggedIn:false,
    isLoading:false,
    isAppready:false
}


_Register = (email,password,fullName) =>{
    this.setState({isLoading:true})

   //calling the register user function here 
   registerUsers(email,password,fullName)
}

...

我现在想要在处理import React from 'react' import { Alert } from 'react-native'; export function registerUsers(email, password, fullName) { fetch('http://00.00.00.00/reg/', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ userEmail: email, userPassword: password, userFullName: fullName }) }).then((response) => response.json()) .then((responseJson) => { //setState({ isLoggedIn: true, isLoading: false }) // Showing response message coming from server after inserting records. Alert.alert(responseJson); }).catch((error) => { // this.setState({ isLoggedIn: true, isLoading: false }) console.error(error); }); }之后更新state值isLoggedIn: true和isLoading:false。现在的问题是我无法弄清楚更新fetch method值的位置，因为我从另一个文件调用state函数。

如果有人可以就如何解决这个问题分享一个想法，我将不胜感激。感谢

Answer 1

registerUsers应该返回承诺。这样，您就可以直接在组件内处理响应：

API：

export function registerUsers(email, password, fullName) {

    return fetch('http://00.00.00.00/reg/', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            userEmail: email,
            userPassword: password,
            userFullName: fullName
        })
    }).then( response => response.json());
}

组件：

import {registerUsers} from './src/utils/api.js'


export class App extends Component{

state = {
    isLoggedIn:false,
    isLoading:false,
    isAppready:false
}


_Register = (email,password,fullName) =>{
    this.setState({isLoading:true})

   //calling the register user function here 
   registerUsers(email, password, fullName)
       .then( responseJson => {
            this.setState({ 
                isLoggedIn: true, 
                isLoading: false,
                data: responseJson
            });
        }).catch( error => {
            this.setState({ isLoggedIn: false, isLoading: false });
        });
}

在本机中更新来自不同文件的状态值

1 个答案: