React与PHP后端数据交互：解决路由参数传递与ID查询更新问题

// edit.js (部分代码)
componentDidMount() {
    Axios.get(
        "http://localhost/testing/edit.php?id=" + this.props.match?.params.id // 此处可能为 undefined
    )
    .then((response) => { /* ... */ })
    .catch(function (error) { console.log(error); });
}

// Edit.jsx (功能组件)
import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom"; // 导入 useParams
import Axios from "axios";
import "./Edit.css";
import "react-datepicker/dist/react-datepicker.css";

function Edit() {
    const { id } = useParams(); // 使用 useParams Hook 获取路由参数
    const [lastName, setLastName] = useState("");
    const [firstName, setFirstName] = useState(""); // 假设还需要firstName

    useEffect(() => {
        // 在组件挂载时根据ID获取数据
        if (id) { // 确保id存在
            Axios.get(`http://localhost/testing/edit.php?id=${id}`)
                .then((response) => {
                    setFirstName(response.data.firstName);
                    setLastName(response.data.lastName);
                })
                .catch((error) => {
                    console.error("Error fetching data:", error);
                });
        }
    }, [id]); // 依赖项为id，当id变化时重新执行

    const onChangeLastName = (e) => {
        setLastName(e.target.value);
    };

    const onSubmit = (e) => {
        e.preventDefault();

        const obj = {
            lastName: lastName,
        };

        Axios.post(`http://localhost/testing/update.php?id=${id}`, obj)
            .then((res) => {
                console.log(res.data);
                // 提交成功后可以重置表单或导航
                // setLastName("");
            })
            .catch((error) => {
                console.error("Error updating data:", error);
            });
    };

    return (
        <div className="edit">
            <form onSubmit={onSubmit}>
                <div className="edit__text">Date & Time Out:</div>
                <label>
                    Last Name:
                    <input
                        name="last"
                        type="text"
                        value={lastName}
                        onChange={onChangeLastName}
                    />
                </label>
                <button type="submit">Submit</button>
            </form>
        </div>
    );
}

export default Edit;

// App.js
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Edit from "./components/Edit"; // 假设Edit组件在components目录下

function App() {
    return (
        <Router>
            <Routes>
                {/* 路径中包含 :id 动态参数 */}
                <Route path="/edit/:id" element={<Edit />} />
                {/* ... 其他路由 */}
            </Routes>
        </Router>
    );
}

<?php

require 'connect.php';
// include_once("Core.php"); // 如果Core.php包含敏感信息或不必要，可以移除或按需调整

// 检查$_GET['id']是否存在且非空，并进行类型转换和清理
$id = isset($_GET['id']) ? (int)$_GET['id'] : 0; // 使用(int)进行类型转换，防止非数字输入

if ($id === 0) {
    http_response_code(400); // Bad Request
    echo json_encode(['error' => 'ID parameter is missing or invalid.']);
    exit;
}

// 使用预处理语句防止SQL注入是最佳实践
$sql = "SELECT * FROM `visitors` WHERE `id` = ?";
$stmt = mysqli_prepare($con, $sql);

if ($stmt) {
    mysqli_stmt_bind_param($stmt, "i", $id); // "i" 表示ID是整数类型
    mysqli_stmt_execute($stmt);
    $result = mysqli_stmt_get_result($stmt);
    $row = mysqli_fetch_assoc($result);

    if ($row) {
        http_response_code(200); // OK
        echo json_encode($row);
    } else {
        http_response_code(404); // Not Found
        echo json_encode(['error' => 'Visitor not found.']);
    }
    mysqli_stmt_close($stmt);
} else {
    http_response_code(500); // Internal Server Error
    echo json_encode(['error' => 'Database query preparation failed: ' . mysqli_error($con)]);
}

mysqli_close($con); // 关闭数据库连接
exit;

?>

<?php
// include_once("Core.php"); // 同上
require 'connect.php';

// 获取POST请求体中的JSON数据
$postdata = file_get_contents("php://input");

if(isset($postdata) && !empty($postdata)) {
    $request = json_decode($postdata, true); // 添加 true 参数，将JSON解码为关联数组

    // 验证并清理ID参数
    $id = isset($_GET['id']) ? (int)$_GET['id'] : 0;
    if ($id === 0) {
        http_response_code(400); // Bad Request
        echo json_encode(['error' => 'ID parameter is missing or invalid.']);
        exit;
    }

    // 验证并清理请求体中的数据
    $lastName = isset($request['lastName']) ? trim($request['lastName']) : '';
    if (empty($lastName)) {
        http_response_code(400); // Bad Request
        echo json_encode(['error' => 'Last name is required.']);
        exit;
    }

    // 使用预处理语句进行更新
    $sql = "UPDATE `visitors` SET `lastName` = ? WHERE `id` = ? LIMIT 1";
    $stmt = mysqli_prepare($con, $sql);

    if ($stmt) {
        mysqli_stmt_bind_param($stmt, "si", $lastName, $id); // "s" 表示字符串, "i" 表示整数

        if (mysqli_stmt_execute($stmt)) {
            if (mysqli_stmt_affected_rows($stmt) > 0) {
                http_response_code(200); // OK
                echo json_encode(['message' => 'Record updated successfully.']);
            } else {
                http_response_code(404); // Not Found (如果ID不存在)
                echo json_encode(['message' => 'No record found or no changes made.']);
            }
        } else {
            http_response_code(500); // Internal Server Error
            echo json_encode(['error' => 'Database update failed: ' . mysqli_stmt_error($stmt)]);
        }
        mysqli_stmt_close($stmt);
    } else {
        http_response_code(500); // Internal Server Error
        echo json_encode(['error' => 'Database query preparation failed: ' . mysqli_error($con)]);
    }
} else {
    http_response_code(400); // Bad Request
    echo json_encode(['error' => 'No data provided for update.']);
}

mysqli_close($con);
exit;

?>