在ReactNative中使用FetchAPI將資料發送到服務器

我想將聯系表格[名字，姓氏，電子郵件，便箋]的資料發送到服務器，但是當我單擊聯系按鈕發送資料時，我得到一個 e=Error 告訴未定義名字這意味著未定義所有 5 個變數如果有人可以幫助???????????? 這是FormScreen.js 的代碼：

import React, { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  SafeAreaView,
  Keyboard,
  ScrollView,
  Alert,
} from 'react-native';

import COLORS from '../src/conts/colors';
import Button from '../src/views/components/Button';
import Input from '../src/views/components/Input';
import Loader from '../src/views/components/Loader';

const ContactForm = ({navigation}) => {
  const [inputs, setInputs] = React.useState({
    firstname: '',
    lastname: '',
    email: '',
    note: '',
  });
  const [errors, setErrors] = React.useState({});
  const [loading, setLoading] = React.useState(false);

  const validate = () => {
    Keyboard.dismiss();
    let isValid = true;

    if (!inputs.firstname) {
      handleError('Please input first name', 'firstname');
      isValid = false;
    }

    if (!inputs.lastname) {
      handleError('Please input last name', 'lastname');
      isValid = false;
    }

    if (!inputs.email) {
      handleError('Please input email', 'email');
      isValid = false;
    } else if (!inputs.email.match(/\S @\S \.\S /)) {
      handleError('Please input a valid email', 'email');
      isValid = false;
    }
    if (!inputs.note) {
      handleError('Please input note', 'note');
      isValid = false;
    }

    if (isValid) {
      submitData();
    }
  };
  const submitData = ()=>{
          fetch("https://flow.simpsimp.ai:2021/react/contact",{
              method:"post",
              headers:{
                'Content-Type': 'application/json'
              },
              body:JSON.stringify({

                firstname,
                lastname,
                email,
                note
              })
          })
          .then(res=>res.json())
          .then(data=>{
              alert(`${data.firstname} is saved successfuly`);
              props.navigation.navigate("Home")
          })
          .catch(err=>{
            alert("someting went wrong")
        })

    };



  const handleOnchange = (text, input) => {
    setInputs(prevState => ({...prevState, [input]: text}));
  };
  const handleError = (error, input) => {
    setErrors(prevState => ({...prevState, [input]: error}));
  };
  return (
    <SafeAreaView style={{backgroundColor: COLORS.white, flex: 1}}>
      <Loader visible={loading} />
      <ScrollView
        contentContainerStyle={{paddingTop: 50, paddingHorizontal: 20}}>
        <Text style={{color: COLORS.black, fontSize: 40, fontWeight: 'bold'}}>
          Contact us
        </Text>
        <Text style={{color: COLORS.grey, fontSize: 18, marginVertical: 10}}>
          Enter Your Details to Contact us
        </Text>
        <View style={{marginVertical: 20}}>

          <Input
            onChangeText={text => handleOnchange(text, 'firstname')}
            onFocus={() => handleError(null, 'firstname')}
            iconName="account-outline"
            label="First Name"
            placeholder="Enter your first name"
            error={errors.firstname}
          />

          <Input
            onChangeText={text => handleOnchange(text, 'lastname')}
            onFocus={() => handleError(null, 'lastname')}
            iconName="account-outline"
            label="Last Name"
            placeholder="Enter your last name"
            error={errors.lastname}
          />

          <Input
            onChangeText={text => handleOnchange(text, 'email')}
            onFocus={() => handleError(null, 'email')}
            iconName="email-outline"
            label="Email"
            placeholder="Enter your email address"
            error={errors.email}
          />

          <Input
            onChangeText={text => handleOnchange(text, 'note')}
            onFocus={() => handleError(null, 'note')}
            iconName="note-outline"
            label="Note"
            placeholder="Enter your note"
            error={errors.note}
          />


          <Button title="Contact Us" onPress={validate} />

        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default ContactForm;

這是錯誤??????????： 在此處輸入圖片描述

uj5u.com熱心網友回復：

這是因為您從未在正文中定義變數：

      body: JSON.stringify({
        firstname: inputs.firstname,
        lastname: inputs.lastname,
        email: inputs.email,
        note: inputs.note,
      }),

將此部分用作身體

標籤：javascript 反应 反应式 获取 API

上一篇：Discord.jsv13錯誤：RangeError[EMBED_FIELD_VALUE]：MessageEmbed欄位值必須是非空字串

下一篇：將字串轉換為矩陣以使用表格顯示