如何正確使用axios使用ReactNativeContextAPI將表單資料發布到phpRESTAPI？

我正在嘗試使用反應原生表單將用戶注冊資料發布到 PHP API。我已經使用 POSTMAN 測驗了 API，它接受資料并發送回正確的成功和錯誤回應。

但是，react native 表單無法發送資料可能是因為我在代碼中做了一些不正確的事情：

這是 MyContext.js 檔案中的相關方法：

registerUser = async (user) => {
    // Sending the user registration request
    const register = await Axios.post('apiRegister.php',{
        username:user.username,
        fname:user.fname,
        lname:user.lname,
        email:user.email,
        password:user.password 
    });

    return register.data;
}

并在下面給出了 react native 專案中注冊螢屏的完整代碼：

import React, {useContext, useState} from 'react';
import { Text, View, StyleSheet, TextInput, Button, Alert } from 'react-native';
import {MyContext} from '../contexts/MyContext';
import Constants from 'expo-constants';
import Login from './Login';


export default function Register({navigation}) {
  const registerUser = useContext(MyContext);
  const initialState = {
    userInfo:{
        username:'',
        fname:'',
        lname:'',
        email:'',
        password:'',
    },
    errorMsg:'',
    successMsg:'',
  }
  const [state,setState] = useState(initialState);

  // On Submit the Registration Form
  const submitForm = async (event) => {
    event.preventDefault();
    const data = await registerUser(state.userInfo);
    if(data.success){
        setState({
            ...initialState,
            successMsg:data.message,
        });
    }
    else{
        setState({
            ...state,
            successMsg:'',
            errorMsg:data.message
        });
    }
}


const onChangeValue = (e) => {
  setState({
      ...state,
      userInfo:{
          ...state.userInfo,
          [e.target.name]:e.target.value
      }
  });
}

// Show Message on Success or Error
let successMsg = '';
let errorMsg = '';
if(state.errorMsg){
    errorMsg = <View>{state.errorMsg}</View>;
  }
  if(state.successMsg){
    successMsg = <View>{state.successMsg}</View>;
  }


  return(
    <View style={styles.container}>
        <Text style={styles.heading1}>Sign Up</Text>
        <form onSubmit={submitForm} noValidate>
            <View style={styles.inputTextWrapper}>
                <label>Username</label>
                <input name="username" type="text" required placeholder="Username" value={state.userInfo.username} onChange={onChangeValue} />                
            </View>
            <View style={styles.inputTextWrapper}>
                <label>First name</label>
                <input name="fname" type="text" required placeholder="First name" value={state.userInfo.fname} onChange={onChangeValue} />                
            </View>
            <View style={styles.inputTextWrapper}>
                <label>Last name</label>
                <input name="lname" type="text" required placeholder="Last name" value={state.userInfo.lname} onChange={onChangeValue} />                
            </View>
            <View style={styles.inputTextWrapper}>
                <label>Email</label>
                <input name="email" type="email" required placeholder="Email" value={state.userInfo.email} onChange={onChangeValue} />
                
            </View>
            <View style={styles.inputTextWrapper}>
                <label>Password</label>
                <input name="password" required type="password" value={state.userInfo.password} onChange={onChangeValue} placeholder="Password"/>
            </View>
            <View>
            {errorMsg}
            {successMsg}
            </View>
            <View style={styles.btnContainer}>
                <Button
                    title="Register"
                    onPress={submitForm}
                />
            </View>
            <Text>{'\n'}</Text>
        </form>
        <View style={styles.btnContainer}>
            
            <Button
                title="Login"
                onPress={() => navigation.navigate("Login")}
            />            
        </View>
    </View>
);


}

我希望如果有人可以查看此代碼并幫助更正它，或者將我指向一個資源，我可以在其中學習使用 React Native 表單、Axios 和 Context API 來通過 PHP API 發布和獲取資料。感謝期待。

uj5u.com熱心網友回復：

const registerUser = async () => {
    const data = {
    username:user.username,
    fname:user.fname,
    lname:user.lname,
    email:user.email,
    password:user.password 
    };

    const config = {
      method: 'post',
      data: data,
      url: 'Write here your api URL example https://facebook.com/feed',
    };
    axios(config)
      .then(async (response) => {
        console.log('response',response);
        //you can use here a state to set your data response
      })
      .catch((error) => {
        console.log(`error`, error.response);
      });
  };

標籤：

上一篇：ReactNavigation-標簽顏色的1個像素為白色

下一篇：react是否以不同的方式處理陣列的先前狀態？