如何通过Axios GET请求从React向Express传参过滤PSQL查询？

完全没问题，我们只需要稍微调整前后端代码，把receiver_id作为查询参数传递给后端，同时用参数化查询保证SQL的安全性——这一步千万别省，能有效防止SQL注入攻击。

后端（Express + PSQL）修改 #

先修改你的路由，从GET请求的查询参数中取出receiver_id，再用PSQL的参数化语法执行查询：

router.get("/conversation", (request, response) => {
  // 从查询参数中获取receiver_id
  const { receiver_id } = request.query;

  // 先校验参数是否存在，避免无效查询
  if (!receiver_id) {
    return response.status(400).json({ error: "缺少必要参数：receiver_id" });
  }

  // 使用参数化查询（$1是PSQL的占位符，对应数组中的第一个参数）
  db.query(
    `SELECT * FROM conversations WHERE receiver_id = $1;`,
    [receiver_id] // 这里的参数会被安全替换，杜绝SQL注入风险
  )
  .then(({ rows: messages }) => {
    return response.json(messages);
  })
  .catch(err => {
    console.error("查询对话失败：", err);
    response.status(500).json({ error: "服务器内部错误" });
  });
});

为什么必须用参数化查询？如果直接拼接字符串（比如WHERE receiver_id = ${receiver_id}），恶意用户可以构造特殊参数篡改你的SQL语句，甚至删除整个数据表——这绝对是要规避的风险。

前端（React）修改 #

接下来调整React组件，把props中的receiver_id作为查询参数通过Axios传给后端：

import { useState, useEffect } from 'react';
import axios from 'axios';

const YourConversationComponent = (props) => {
  const [conversations, setConversations] = useState([]);
  const [messages, setMessages] = useState([]);
  // 从props中解构出receiver_id
  const { receiver_id } = props;

  useEffect(() => {
    // 确保receiver_id存在时才发起请求，避免无效调用
    if (!receiver_id) return;

    axios.get("/messages/conversation", {
      params: {
        receiver_id: receiver_id // 传递receiver_id作为查询参数
      }
    })
    .then( (response) => {
      setConversations(response.data);
    } )
    .catch(err => {
      console.error("获取对话列表失败：", err);
    });
  }, [messages, receiver_id]); // 将receiver_id加入依赖项，参数变化时自动重新请求

  // ... 你的组件渲染逻辑
};

export default YourConversationComponent;

这里把receiver_id加入useEffect的依赖数组很关键——当props中的receiver_id变化时，组件会自动重新发起请求，拉取对应的数据。

额外小提示 #

• 前后端都加了错误处理，方便你在开发和生产环境中快速排查问题。
• 如果receiver_id是数字类型，PSQL会自动完成类型转换，不需要额外处理。
• 你还可以根据业务需求，在后端添加更严格的参数校验（比如判断receiver_id是否为有效数字）。

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