在 React Native 中使用 Fetch API 将数据发送到服务器

Question

我想将联系表格[名字，姓氏，电子邮件，便笺]的数据发送到服务器，但是当我单击联系按钮发送数据时，我得到一个 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;

这是错误👇👇👇👇👇：在此处输入图片描述

Answer 1

这是因为您从未在正文中定义变量：

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

将此部分用作身体