React中数据库关联查询结果展示失效问题求助

问题背景 #

已实现单表查询的React数据展示：后端通过app.get('/dormitory1')接口查询dormitory1表，前端ListDormitory组件可正常渲染数据并支持删除、编辑操作。但新开发的/search关联查询接口（使用INNER JOIN）及Search组件无法正常渲染数据，需排查修复。

核心错误点及修复方案 #

1. 后端SQL查询语法错误（最关键） #

原SQL用括号包裹查询字段，导致PostgreSQL返回的是单个匿名元组对象（形如{"row": ["宿舍名", "北京", "朝阳区", ...]}），而非扁平化的键值对，前端无法直接通过search.city访问字段。同时需补充表头所需的currentcapacity字段，并处理参数缺失的情况。

修复后的后端接口代码

app.get("/search", async (req, res) => {
    try {
      // 给参数设置默认值，避免参数缺失时出现%undefined%
      const { city = "", district = "", typeofdormitory = "" } = req.query;

      const search = await client.query(
        `SELECT 
            dormitory1.nameofdormitory,
            location.city,
            location.district,
            dormitory1.typeofdormitory,
            dormitory1.capacity,
            dormitory1.currentcapacity,
            dormitory1.checkintime,
            dormitory1.checkouttime,
            dormitory1.numberofmeals,
            dormitory1.phone,
            dormitory1.dormitoryid
         FROM location
        INNER JOIN dormitory1 ON location.locationid = dormitory1.locationid  
        WHERE city ILIKE $1 AND district ILIKE $2 AND typeofdormitory ILIKE $3`,
        [`%${city}%`, `%${district}%`, `%${typeofdormitory}%`]
      );

      res.json(search.rows);
    } catch (err) {
      console.error(err.message);
      res.status(500).json({ error: err.message });
    }
  });

2. 前端请求与渲染问题 #

原前端未传递查询参数，导致后端WHERE条件匹配%undefined%返回空数据；同时渲染时无法正确访问元组字段，且key值不存在。

修复后的前端Search组件代码

import React, { useEffect, useState } from 'react'

const Search = () => {
    const [search, setSearch] = useState([]);

    const getSearch = async () => {
        try {
          // 传递默认参数，也可改为通过表单输入动态传递
          const response = await fetch("http://localhost:6302/search?city=&district=&typeofdormitory=");
          const jsonData = await response.json();

          setSearch(jsonData);
        } catch (err) {
          console.error(err.message);
        }
      };

      useEffect(() => {
        getSearch();
      }, []);

  return (
    <>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"></link>
      <table className="table mt-5 text-center">
        <thead>
          <tr>
            <th>City</th>
            <th>District</th>
            <th>Name of Dormitory</th>
            <th>Type of Dormitory</th>
            <th>Capacity</th>
            <th>Current Capacity</th>
            <th>Check In Time </th>
            <th>Check Out Time</th>
            <th>Number Of Meals</th>
            <th>Phone Number</th>
          </tr>
        </thead>
        <tbody>
          {search.map(item => (
            <tr key={item.dormitoryid}>
              <td>{item.city}</td>
              <td>{item.district}</td>
              <td>{item.nameofdormitory}</td>
              <td>{item.typeofdormitory}</td>
              <td>{item.capacity}</td>
              <td>{item.currentcapacity}</td>
              <td>{item.checkintime}</td>
              <td>{item.checkouttime}</td>
              <td>{item.numberofmeals}</td>
              <td>{item.phone}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  )
}

export default Search

3. 补充检查项 #

• 查看浏览器控制台的Network标签：确认/search请求的地址、参数是否正确，返回的JSON是否为扁平化键值对。
• 检查后端控制台：确认SQL是否有执行错误。
• 跨域验证：若前后端端口不同，需确保后端配置了CORS（如使用cors中间件），避免请求被拦截。

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