この記事では、React フロントエンドと PHP バックエンドの間で ID のクエリと更新を行う際の一般的なルーティング パラメーター転送の問題について詳しく説明します。 this.props.match?.params.id が失敗する理由を分析することにより、React Router v6 での useParams Hook の正しい使用法が紹介され、詳細に説明されています。 PHP バックエンド コードと組み合わせて、SQL インジェクション保護などのベスト プラクティスを強調(diào)しながら、ID を介してデータ クエリと更新操作を安全かつ効果的に実行する方法を示します。

問題の理解: React ルート パラメーターと PHP バックエンドのやり取りの課題

最新の Web アプリケーションを構(gòu)築する場合、フロントエンド フレームワーク (React など) とバックエンド サービス (PHP など) の間のデータ対話が中心となります。一般的なシナリオは、URL 內(nèi)の ID に基づいて特定のリソースをクエリまたは更新することです。ただし、開発者が React コンポーネントから URL パラメーターを取得して PHP バックエンドに渡そうとすると、パラメーターが未定義であるか、PHP が ID を受信できないという問題が発生する可能性があります。

具體的には、古いバージョンの React Router (v5 以前) では、ルート経由でレンダリングされたコンポーネントが this.props.match.params.id 経由で URL パラメーターにアクセスできました。しかし、React Router v6 のリリースにより、この方法は廃止されたか、直接利用できなくなりました。このプロパティが未定義を返すと、フロントエンドは ID をバックエンドに正しく送信できず、PHP スクリプトの $_GET['id'] が予期した値を取得できなくなり、データのクエリと更新の操作に影響します。

解決策: React Hooks useParams を使用してルート パラメーターを取得する

React Router v6 では、ルーティング パラメータの取得を大幅に簡素化するフックが導入されています。機能コンポーネントの場合は、useParams Hook を使用して URL 內(nèi)の動的パラメータを取得する必要があります。

1. React フロントエンドコンポーネントの変換

元のクラス コンポーネントを変更するか、ラッパー経由で useParams を使用する必要があります。最も推奨される方法は、クラス コンポーネントを機能コンポーネントにリファクタリングしてフックを直接利用することです。

元のクラスコンポーネントのコードスニペット (問題があります):

 // edit.js (コードの一部)
コンポーネントDidMount() {
    Axios.get(
        "http://localhost/testing/edit.php?id=" this.props.match?.params.id // これは未定義である可能性があります
    )
    .then((応答) => { /* ... */ })
    .catch(関數(shù) (エラー) { console.log(エラー); });
}

機能コンポーネントに変換し、useParams を使用します。

まず、React Router のバージョンが v6 以降であることを確認してください。

 // Edit.jsx (機能コンポーネント)
import React, { useState, useEffect } from "react";
「react-router-dom」からインポート { useParams }; // useParams をインポートします
「axios」から Axios をインポートします。
"./Edit.css" をインポートします。
インポート "react-datepicker/dist/react-datepicker.css";

関數(shù) Edit() {
    const { id } = useParams(); // useParams フックを使用してルーティング パラメータを取得します const [lastName, setLastName] = useState("");
    const [firstName, setFirstName] = useState(""); // firstName も必要であると仮定します

    useEffect(() => {
        // コンポーネントがマウントされているときに ID に基づいてデータを取得します if (id) { // ID が存在することを確認します Axios.get(`http://localhost/testing/edit.php?id=${id}`)
                .then((応答) => {
                    setFirstName(response.data.firstName);
                    setLastName(response.data.lastName);
                })
                .catch((エラー) => {
                    console.error("データ取得エラー:", error);
                });
        }
    }, [id]); // 依存関係は id です。id が変更されたときに再実行します。 const onChangeLastName = (e) => {
        setLastName(e.target.value);
    };

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

        const obj = {
            姓: 姓、
        };

        Axios.post(`http://localhost/testing/update.php?id=${id}`, obj)
            .then((res) => {
                console.log(res.data);
                // 送信が成功した後、フォームまたはナビゲーションをリセットできます。 // setLastName("");
            })
            .catch((エラー) => {
                console.error("データ更新エラー:", error);
            });
    };

    戻る （
        <div classname="編集">
            
                <div classname="edit__text">日付とタイムアウト:</div>
                
                    苗字：
                    
                
                <button type="submit">送信</button>
            
        </div>
    );
}

デフォルトの編集をエクスポートします。

ルーティング構(gòu)成例 (App.js):

ルート パスには必ず動的パラメータを含めてください。次に例を示します。

 //App.js
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
「./components/Edit」から編集をインポートします。 // Edit コンポーネントがコンポーネント ディレクトリにあると仮定します function App() {
    戻る （
        
            
                {/* パスには次のものが含まれます: id 動的パラメータ */}
                } />
                {/* ... 他のルート */}
            ルート>
        ルーター>
    );
}

このようにすると、/edit/123 にアクセスすると、useParams() は { id: "123" } を返します。

PHP バックエンド データ クエリ (ID による選択)

PHP バックエンドは、フロントエンドによって渡された ID を受信し、それに応じてデータベースからデータを取得する責任があります。

edit.php コードの分析と最適化:

 <?php 「connect.php」が必要です。
// include_once("Core.php"); // Core.php に機密情報が含まれている場合、または不要な場合は、必要に応じて削除または調(diào)整できます。 // $_GET[&#39;id&#39;] が存在し、空でないことを確認し、型変換とクリーニングを?qū)g行します $id = isset($_GET[&#39;id&#39;]) ? (int)$_GET[&#39;id&#39;] : 0; // 數(shù)値以外の入力を防ぐため、型変換に (int) を使用します if ($id === 0) {
    http_response_code(400); // 要求の形式が正しくありません
    echo json_encode([&#39;error&#39; => 'ID パラメータが見つからないか無効です。']);
    出口;
}

// SQL インジェクションを防ぐためにプリペアド ステートメントを使用することをお勧めします $sql = "SELECT * FROM `visitors` WHERE `id` = ?";
$stmt = mysqli_prepare($con, $sql);

if ($stmt) {
    mysqli_stmt_bind_param($stmt, "i", $id); // "i" は ID が整數(shù)型であることを意味します mysqli_stmt_execute($stmt);
    $result = mysqli_stmt_get_result($stmt);
    $row = mysqli_fetch_assoc($result);

    if ($row) {
        http_response_code(200); // わかりました
        エコー json_encode($row);
    } それ以外 {
        http_response_code(404); // 見つかりません
        echo json_encode(['error' => '訪問者が見つかりません。']);
    }
    mysqli_stmt_close($stmt);
} それ以外 {
    http_response_code(500); // 內(nèi)部サーバーエラー
    echo json_encode(['error' => 'データベースクエリの準備に失敗しました: ' .mysqli_error($con)]);
}

mysqli_close($con); // データベース接続出口を閉じます。

?>

主な改善點:

• 入力の検証とサニタイズ: isset() と empty() を使用して $_GET['id'] をチェックし、(int) を使用して整數(shù)に変換して、數(shù)値以外の入力によるエラーや潛在的なセキュリティ問題の発生を防ぎます。
• SQL インジェクション保護: mysqli_prepare() および mysqli_stmt_bind_param() を使用してプリペアド ステートメントを作成します。これは、SQL インジェクション攻撃を防ぐ最も効果的な方法です。
• HTTP ステータス コード: API の堅牢性を高めるために、操作結(jié)果に応じて適切な HTTP ステータス コード (200 OK、400 Bad Request、404 Not Found、500 Internal Server Error) を返します。
• エラー処理: mysqli_prepare() および mysqli_fetch_assoc() の結(jié)果のチェックを追加し、失敗した場合にはエラー情報を返します。
• データベース接続管理: スクリプトの最後でデータベース接続 mysqli_close($con) を閉じます。

PHPバックエンドデータ更新（IDによる更新）

クエリと同様に、更新操作でも URL から ID を取得し、リクエスト本文から更新するデータを取得する必要があります。

update.php コードの分析と最適化:

 <?php // include_once("Core.php"); // 上記と同様に &#39;connect.php&#39; が必要です。

// POST リクエストボディの JSON データを取得 $postdata = file_get_contents("php://input");

if(isset($postdata) && !empty($postdata)) {
    $request = json_decode($postdata, true); // true パラメータを追加し、JSON を連想配列にデコードします // ID パラメータを検証してクリーンアップします $id = isset($_GET[&#39;id&#39;]) ? (int)$_GET[&#39;id&#39;] : 0;
    if ($id === 0) {
        http_response_code(400); // 要求の形式が正しくありません
        echo json_encode([&#39;error&#39; => 'ID パラメータが見つからないか無効です。']);
        出口;
    }

    // リクエスト本文のデータを検証して消去します $lastName = isset($request['lastName']) ?トリム($request['lastName']) : '';
    if (空($lastName)) {
        http_response_code(400); // 要求の形式が正しくありません
        echo json_encode(['error' => '姓は必須です。']);
        出口;
    }

    //プリペアドステートメントを使用して更新 $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" は整數(shù)を表します if (mysqli_stmt_execute($stmt)) {
            if (mysqli_stmt_affected_rows($stmt) > 0) {
                http_response_code(200); // わかりました
                echo json_encode(['メッセージ' => 'レコードは正常に更新されました。']);
            } それ以外 {
                http_response_code(404); // Not Found (IDが存在しない場合)
                echo json_encode(['メッセージ' => 'レコードが見つからないか、変更は行われません。']);
            }
        } それ以外 {
            http_response_code(500); // 內(nèi)部サーバーエラー
            echo json_encode(['error' => 'データベースの更新に失敗しました: ' .mysqli_stmt_error($stmt)]);
        }
        mysqli_stmt_close($stmt);
    } それ以外 {
        http_response_code(500); // 內(nèi)部サーバーエラー
        echo json_encode(['error' => 'データベースクエリの準備に失敗しました: ' .mysqli_error($con)]);
    }
} それ以外 {
    http_response_code(400); // 要求の形式が正しくありません
    echo json_encode(['error' => '更新用のデータが提供されていません。']);
}

mysqli_close($con);
出口;

?>

主な改善點:

• データの検証とクリーニング: $_GET['id'] と $request['lastName'] の両方で厳密な検証とクリーニングが実行されます。
• JSON デコード: json_decode($postdata, true) は、簡単にアクセスできるように、JSON 文字列を PHP 連想配列にデコードします。
• SQL インジェクション保護: 更新操作にもプリペアド ステートメントを使用します。
• HTTP ステータス コード: 成功を示す 200 OK、ID が存在しない、またはレコードが更新されていないことを示す 404 Not Found など、より詳細なステータス コードを返します。
• エラー メッセージ: デバッグに役立つ、より具體的なエラー情報を提供します。

注意すべき點とベストプラクティス

1. React Router のバージョンの互換性: React Router のバージョンが、コードで使用されている API (useParams) と互換性があることを確認してください。 useParams は React Router v5.1 で導入され、v6 では優(yōu)先されます。
2. SQL インジェクション保護: これは、バックエンド開発における最も重要なセキュリティ対策の 1 つです。ユーザーが入力したすべてのデータを処理するには常にプリペアド ステートメントを使用し、SQL クエリ文字列を直接結(jié)合することを避けてください。
3. エラー処理とログ: フロントエンドとバックエンドの両方に、堅牢なエラー処理メカニズムが必要です。フロントエンドは、try...catch または .catch() を使用して API リクエストの失敗を処理します。バックエンドはデータベース操作エラーをキャプチャしてログを記録し、意味のあるエラー情報をフロントエンドに返します。
4. HTTP ステータス コードの標準的な使用: HTTP ステータス コードを正しく使用すると、フロントエンドがバックエンドの応答をよりよく理解し、対応する処理ロジックを採用するのに役立ちます (たとえば、404 はリソースが存在しないことを示し、400 はリクエスト パラメータが正しくないことを示し、500 は內(nèi)部サーバー エラーを示します)。
5. フロントエンドとバックエンドのデータ検証: バックエンドの検証に加えて、フロントエンドはユーザー エクスペリエンスを向上させるために予備的な入力検証を?qū)g行することもできます。
6. コンポーネント構(gòu)造: 機能コンポーネントとフックを可能な限り使用します。これが React の最新の開発パラダイムです。
7. API URL 管理: API の基本 URL を構(gòu)成して、さまざまな環(huán)境 (開発、テスト、運用) での切り替えを容易にします。

要約する

React フロントエンドと PHP バックエンド間の ID パラメーター転送の問題を解決する鍵は、React Router のバージョン変更によってもたらされる API の更新を理解し、useParams Hook を使用して URL パラメーターを取得することです。同時に、PHP バックエンドは、アプリケーションのセキュリティ、安定性、保守性を確保するために、受信したパラメーターを厳密に検証してクリーンアップし、準備されたステートメントを使用してデータベース操作を?qū)g行する必要があります。これらのベスト プラクティスに従うことで、効率的で安全で保守が容易なフルスタック アプリケーションを構(gòu)築できます。

以上がReact と PHP バックエンド データの相互作用: ルーティング パラメーター転送、ID クエリ、更新の問題を解決するの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。