React按ID操作SQL数据库时this.props.match?.params.id未定义PHP返回null

问题修复方案 #

1. React端路由参数获取失败修复 #

this.props.match?.params.id返回undefined的核心原因是路由配置问题或React Router版本适配问题：

• 首先确认路由配置中是否定义了id参数，示例正确配置：

  // React Router v5 写法
  <Route path="/edit/:id" component={Edit} />
  
  // React Router v6 写法
  <Route path="/edit/:id" element={<Edit />} />
  

• 如果你使用的是React Router v6，该版本已移除类组件默认的match属性，推荐改为函数组件配合useParams钩子获取参数，修改后的edit.js代码如下：

import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import "./Edit.css";
import "react-datepicker/dist/react-datepicker.css";
import Axios from "axios";

export default function Edit() {
  const { id } = useParams();
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");

  useEffect(() => {
    Axios.get("http://localhost/testing/edit.php?id=" + id)
      .then((response) => {
        if (response.data) {
          setFirstName(response.data.firstName);
          setLastName(response.data.lastName);
        }
      })
      .catch(function (error) {
        console.log(error);
      });
  }, [id]);

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

  const onSubmit = (e) => {
    e.preventDefault();
    const obj = { lastName };
    Axios.post("http://localhost/testing/update.php?id=" + id, obj)
      .then((res) => console.log(res.data));
    setLastName("");
  };

  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>Submit</button>
      </form>
    </div>
  );
}

2. PHP接口修复（含SQL注入防护、参数校验） #

原PHP代码存在参数未校验、SQL注入风险、无错误返回的问题，修复后代码如下：

edit.php

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

// 参数校验
if (!isset($_GET['id']) || empty($_GET['id'])) {
    http_response_code(400);
    echo json_encode(['error' => '缺少id参数']);
    exit;
}
$id = $_GET['id'];

// 使用预处理语句防止SQL注入
$stmt = mysqli_prepare($con, "SELECT * FROM `visitors` WHERE `id` = ? LIMIT 1");
mysqli_stmt_bind_param($stmt, "s", $id);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
$row = mysqli_fetch_assoc($result);

if (!$row) {
    http_response_code(404);
    echo json_encode(['error' => '数据不存在']);
    exit;
}

echo json_encode($row);
exit;

update.php

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

// 参数校验
if (!isset($_GET['id']) || empty($_GET['id'])) {
    http_response_code(400);
    echo json_encode(['error' => '缺少id参数']);
    exit;
}
$id = $_GET['id'];

// 获取提交数据
$postdata = file_get_contents("php://input");
if(isset($postdata) && !empty($postdata)) {
    $request = json_decode($postdata);
    if (!isset($request->lastName)) {
        http_response_code(400);
        echo json_encode(['error' => '缺少lastName参数']);
        exit;
    }
    $lastName = $request->lastName;
    
    // 预处理语句更新数据
    $stmt = mysqli_prepare($con, "UPDATE `visitors` SET `lastName` = ? WHERE `id` = ? LIMIT 1");
    mysqli_stmt_bind_param($stmt, "ss", $lastName, $id);
    
    if(mysqli_stmt_execute($stmt)) {
        http_response_code(200);
        echo json_encode(['msg' => '更新成功']);
    } else {
        http_response_code(422);
        echo json_encode(['error' => '更新失败：'.mysqli_error($con)]);
    }
    exit;
}

http_response_code(400);
echo json_encode(['error' => '缺少提交数据']);
exit;

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