React Native中TypeError: Network request failed错误排查及表单咨询

一、解决「TypeError: Network request failed」错误 #

1. 排查办公网络限制 #

• 切换至手机移动数据重新运行App，若能正常加载事件数据，说明办公网络确实限制了对https://tuosito.altervista.org/api-eventi.php的访问。
• 在办公网络下，用手机浏览器直接访问该API地址，确认是否能获取JSON数据。若浏览器也无法访问，联系网络管理员核实是否屏蔽了该域名或HTTPS（443）端口。

2. 代码层面增强容错性 #

给fetch添加超时处理，并在UI层提供错误反馈，替换原控制台打印逻辑：

// 修改Eventi.js中的useEffect部分
useEffect(() => {
  const apiUrl = 'https://tuosito.altervista.org/api-eventi.php';
  
  const fetchData = async () => {
    try {
      const controller = new AbortController();
      const timeoutId = setTimeout(() => controller.abort(), 10000); // 10秒超时

      const response = await fetch(apiUrl, { signal: controller.signal });
      clearTimeout(timeoutId);
      
      if (!response.ok) throw new Error(`HTTP错误：${response.status}`);
      const data = await response.json();
      setEventi(data);
    } catch (error) {
      console.error('Errore nella richiesta:', error);
      // 可在此添加错误状态，在UI显示提示
      // setError('无法加载事件数据，请检查网络连接');
    }
  };

  fetchData();
}, []);

二、实现官网同款表单提交功能 #

完全可以实现，但核心逻辑必须在后端完成，前端仅负责收集用户输入并发送请求。以下是具体方案：

1. 前端表单组件（Expo/React Native） #

创建收集用户数据并提交的表单：

import React, { useState } from 'react';
import { View, TextInput, Button, Text, StyleSheet } from 'react-native';

const ReservationForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [message, setMessage] = useState('');
  const [submitStatus, setSubmitStatus] = useState('');

  const handleSubmit = async () => {
    setSubmitStatus('提交中...');
    try {
      const response = await fetch('https://tuosito.altervista.org/submit-reservation.php', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ name, email, phone, message }),
      });

      const result = await response.json();
      if (result.success) {
        setSubmitStatus(`提交成功！你的唯一码：${result.uniqueCode}`);
        // 清空表单
        setName('');
        setEmail('');
        setPhone('');
        setMessage('');
      } else {
        setSubmitStatus('提交失败，请稍后重试');
      }
    } catch (error) {
      console.error('提交错误:', error);
      setSubmitStatus('网络错误，无法提交');
    }
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="姓名"
        value={name}
        onChangeText={setName}
      />
      <TextInput
        style={styles.input}
        placeholder="邮箱"
        keyboardType="email-address"
        value={email}
        onChangeText={setEmail}
      />
      <TextInput
        style={styles.input}
        placeholder="电话"
        keyboardType="phone-pad"
        value={phone}
        onChangeText={setPhone}
      />
      <TextInput
        style={styles.input}
        placeholder="留言"
        multiline
        value={message}
        onChangeText={setMessage}
      />
      <Button title="提交" onPress={handleSubmit} />
      {submitStatus && <Text style={styles.status}>{submitStatus}</Text>}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    gap: 10,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    borderRadius: 5,
  },
  status: {
    marginTop: 10,
    textAlign: 'center',
    color: submitStatus.includes('成功') ? 'green' : 'red',
  },
});

export default ReservationForm;

2. 后端处理逻辑（PHP示例：submit-reservation.php） #

在你的altervista.org空间创建该文件，负责数据存储、邮件发送和唯一码生成：

<?php
header('Content-Type: application/json');
$response = ['success' => false, 'uniqueCode' => ''];

// 1. 获取前端POST数据
$data = json_decode(file_get_contents('php://input'), true);
if (!$data || empty($data['name']) || empty($data['email'])) {
  echo json_encode($response);
  exit;
}

// 2. 生成唯一码
$uniqueCode = uniqid('RES_', true) . rand(1000, 9999);

// 3. 存储到数据库（需替换为你的数据库信息）
$host = 'localhost';
$dbname = '你的数据库名';
$username = '你的用户名';
$password = '你的密码';

try {
  $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $username, $password);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  $stmt = $pdo->prepare("INSERT INTO reservations (name, email, phone, message, unique_code, created_at) VALUES (?, ?, ?, ?, ?, NOW())");
  $stmt->execute([$data['name'], $data['email'], $data['phone'], $data['message'], $uniqueCode]);

  // 4. 发送邮件（若内置mail函数不可用，可改用SendGrid等第三方服务）
  $to = '你的接收邮箱@example.com';
  $subject = '新的预订请求';
  $emailBody = "姓名：{$data['name']}\n邮箱：{$data['email']}\n电话：{$data['phone']}\n留言：{$data['message']}\n唯一码：{$uniqueCode}";
  $headers = "From: noreply@tuosito.altervista.org\r\n";

  mail($to, $subject, $emailBody, $headers);

  $response['success'] = true;
  $response['uniqueCode'] = $uniqueCode;
} catch (Exception $e) {
  error_log('预订处理错误：' . $e->getMessage());
}

echo json_encode($response);
?>

注意事项 #

• 确保数据库中存在reservations表，字段包含name、email、phone、message、unique_code、created_at。
• 前端需补充表单验证（如邮箱格式、必填项检查），减少无效请求。

内容的提问来源于stack exchange，提问作者Alessio Torregrossa